AngularJS - Bindung an Direktiven-Größenänderung

Wie kann ich benachrichtigt werden, wenn eine Richtlinie geändert wird?
ich habe versucht

element[0].onresize = function() {
            console.log(element[0].offsetWidth + " " + element[0].offsetHeight);
        }

aber nicht die Funktion aufrufen,

(function() {
'use strict';

//Define the directive on the module.
//Inject the dependencies. 
//Point to the directive definition function.
angular.module('app').directive('nvLayout', ['$window', '$compile', layoutDirective]);

function layoutDirective($window, $compile) {
    //Usage:
    //
    //Creates:
    //
    var directive = {
        link: link,
        restrict: 'EA',
        scope: {
            layoutEntries: "=",
            selected: "&onSelected"
        },
        template: "<div></div>",
        controller: controller
    };
    return directive;

    function link(scope, element, attrs) {
        var elementCol = [];

        var onSelectedHandler = scope.selected();

        element.on("resize", function () {
            console.log("resized.");
        });

        $(window).on("resize",scope.sizeNotifier);

        scope.$on("$destroy", function () {
            $(window).off("resize", $scope.sizeNotifier);
        });

        scope.sizeNotifier = function() {
            alert("windows is being resized...");
        };

        scope.onselected = function(id) {
            onSelectedHandler(id);
        };



        scope.$watch(function () {
            return scope.layoutEntries.length;
        },
        function (value) {
            //layout was changed
            activateLayout(scope.layoutEntries);
        });

        function activateLayout(layoutEntries) {


            for (var i = 0; i < layoutEntries.length; i++) {

                if (elementCol[layoutEntries[i].id]) {
                    continue;
                }
                var div = "<nv-single-layout-entry id=slot" + layoutEntries[i].id + " on-selected='onselected' style=\"position:absolute;";
                div = div + "top:" + layoutEntries[i].position.top + "%;";
                div = div + "left:" + layoutEntries[i].position.left + "%;";
                div = div + "height:" + layoutEntries[i].size.height + "%;";
                div = div + "width:" + layoutEntries[i].size.width + "%;";
                div = div + "\"></nv-single-layout-entry>";

                var el = $compile(div)(scope);
                element.append(el);
                elementCol[layoutEntries[i].id] = 1;
            }


        };
    }

    function controller($scope, $element) {

    }
}

      })();

InformationsquelleAutor der Frage li-raz | 2014-01-16

angularjs angularjs-directive

Verwenden scope.$Uhr mit einer custom-Uhr-Funktion:

scope.$watch(
  function () {
    return [element[0].offsetWidth, element[0].offsetHeight].join('x');
  },
  function (value) {
    console.log('directive got resized:', value.split('x'));
  }
)

InformationsquelleAutor der Antwort epegzz

Würden Sie in der Regel sehen wollen das element offsetWidth und offsetHeight Eigenschaften. Mit neueren Versionen von AngularJS, die Sie verwenden können $scope.$watchGroup in Ihrer link-Funktion:

app.directive('myDirective', [function() {

    function link($scope, element) {
        var container = element[0];

        $scope.$watchGroup([
            function() { return container.offsetWidth; },
            function() { return container.offsetHeight; }
        ],  function(values) {
              //Handle resize event ...
        });
    }

    //Return directive definition ...

}]);

Allerdings können Sie feststellen, dass die updates sind sehr langsam, wenn gerade die element-Eigenschaften direkt in dieser Art und Weise.

Machen Ihre Richtlinie reagiert, könnten Sie moderieren die refresh-rate durch die Verwendung von $interval. Hier ist ein Beispiel für eine Mehrweg-service für das ansehen von element-Größen in einem konfigurierbaren Millisekunde rate:

app.factory('sizeWatcher', ['$interval', function($interval) {
    return function (element, rate) {
        var self = this;
        (self.update = function() { self.dimensions = [element.offsetWidth, element.offsetHeight]; })();
        self.monitor = $interval(self.update, rate);
        self.group = [function() { return self.dimensions[0]; }, function() { return self.dimensions[1]; }];
        self.cancel = function() { $interval.cancel(self.monitor); };
    };
}]);

Einer Richtlinie über solch ein service würde in etwa so Aussehen:

app.directive('myDirective', ['sizeWatcher', function(sizeWatcher) {

    function link($scope, element) {
        var container = element[0],
            watcher = new sizeWatcher(container, 200);

        $scope.$watchGroup(watcher.group, function(values) {
            //Handle resize event ...
        });

        $scope.$on('$destroy', watcher.cancel);
    }

    //Return directive definition ...

}]);

Beachten Sie den Aufruf watcher.cancel() im $scope.$destroy event-handler; dies stellt sicher, dass die $interval Instanz wird zerstört, wenn Sie nicht mehr benötigt.

Einem JSFiddle-Beispiel finden Sie hier.

InformationsquelleAutor der Antwort SimonSparks

Hier ein Beispiel-code von dem, was Sie tun müssen:

APP.directive('nvLayout', function ($window) {
  return {
    template: "<div></div>",
    restrict: 'EA',
    link: function postLink(scope, element, attrs) {

      scope.onResizeFunction = function() {
        scope.windowHeight = $window.innerHeight;
        scope.windowWidth = $window.innerWidth;

        console.log(scope.windowHeight+"-"+scope.windowWidth)
      };

      //Call to the function when the page is first loaded
      scope.onResizeFunction();

      angular.element($window).bind('resize', function() {
        scope.onResizeFunction();
        scope.$apply();
      });
    }
  };
});

InformationsquelleAutor der Antwort Eliel Haouzi

2

Der einzige Weg, Sie wäre in der Lage zu erkennen, Größe/position änderungen auf ein element über $Uhr ist, wenn Sie ständig aktualisiert und in Ihrem Umfang ist Sie so etwas wie $Intervall oder $timeout. Obwohl es möglich ist, es kann eine teure operation, und wirklich langsam Ihre app nach unten.

Einen Weg, den Sie erkennen konnte, dass die änderung auf ein element aufrufen
requestAnimationFrame.
```
var previousPosition = element[0].getBoundingClientRect();

onFrame();

function onFrame() {
  var currentPosition = element[0].getBoundingClientRect();

  if (!angular.equals(previousPosition, currentPosition)) {
    resiszeNotifier();
  }

  previousPosition = currentPosition;
  requestAnimationFrame(onFrame);
}

function resiszeNotifier() {
  //Notify...
}
```
Hier ein Plunk dies demonstrieren. Solange Sie in Bewegung sind die box um, bleibt es rot.

http://plnkr.co/edit/qiMJaeipE9DgFsYd0sfr?p=preview

InformationsquelleAutor der Antwort Blake Bowen

Einer leichten variation auf Eliel Antwort für mich gearbeitet. In der directive.js:

      $scope.onResizeFunction = function() {
      };

      //Call to the function when the page is first loaded
      $scope.onResizeFunction();

      angular.element($(window)).bind('resize', function() {
        $scope.onResizeFunction();
        $scope.$apply();
      });

Nenne ich

    $(window).resize();

innerhalb meiner app.js. Die Richtlinie d3 Diagramm wird nun die Größe, den container zu füllen.

InformationsquelleAutor der Antwort Matt Bearson

Hier ist mein nehmen auf dieser Richtlinie (mit Webpack als bundler):

module.exports = (ngModule) ->

  ngModule.directive 'onResize', ['Callback', (Callback) ->
    restrict: 'A'
    scope:
      onResize: '@'
      onResizeDebounce: '@'
    link: (scope, element) ->
      container = element[0]
      eventName = scope.onResize || 'onResize'
      delay = scope.onResizeDebounce || 1000
      scope.$watchGroup [
        -> container.offsetWidth ,
        -> container.offsetHeight
      ], _.debounce (values) ->
        Callback.event(eventName, values)
      , delay
  ]

InformationsquelleAutor der Antwort Kamil

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.