AngularJS-Direktive Uhr übergeordneten Größe ändern

Problem

Habe ich eine einfache Richtlinie, die ausgeführt wird, Dimensionierung-updates auf ein bestimmtes element. Diese Uhren die Größe des Fensters und macht entsprechende Anpassungen.

MyApp.directive('resizeTest', ['$window', function($window) {
  return {
    restrict: 'AC',
    link: function(scope, element) {
      var w = angular.element($window);
      scope.$watch(function() {
        return { 'h': w.height(), 'w': w.width() };
      }, function(newValue, oldValue) {
        //resizing happens here
      }, true);
      w.bind('resize', function() { scope.$apply(); });
    }
  };
}]);

Das funktioniert gut.

Es ist einfach so passiert, dass im inneren des div - tag zugeordnet ist, ich habe ein Kind div. Wenn der Elternteil in der Größe geändert wird, möchte ich die Positionierung von Veränderungen auf der Kind-element. Allerdings habe ich nicht den Auslöser, um Feuer.

Diese wird aufgerufen beim Systemstart, aber nicht ausgelöst, wenn das element geändert oder ändert sich die Anzeige:

MyApp.directive('centerVertical', ['$window', function($window) {
  return {
    restrict: 'AC',
    link: function(scope, element) {
      element.css({border: '1px solid #0000FF'});
      scope.$watch('data.overlaytype', function() {
        $window.setTimeout(function() {
          console.log('I am:      ' + element.width() + 'x' + element.height());
          console.log('Parent is: ' + element.parent().width() + 'x' + element.parent().height());
        }, 1);
      });
    }
  };
}]);

Welche Art von Bindung oder Uhr, sollte die Konfiguration die ich verwendet, um überprüfen Sie die Größe des parent-Elements?

Fiddle

https://jsfiddle.net/rcy63v7t/1/

Haben Sie plnkr/fiddle?
Ich werde versuchen, eine einzurichten. Ich habe nicht getan, eine solche für AngularJS noch, so dass es eine gute Erfahrung sein wird.
Geige Hinzugefügt. Ich habe festgestellt, dass wenn ich auskommentiert die zweite Richtlinie, die erste funktioniert wieder.

InformationsquelleAutor el n00b | 2015-03-27

  1. 10

    Den Wert data.overlaytype Sie sind der Beobachtung in der centerVertical Richtlinie ist nicht auf die scope so wird der daraus resultierende Wert undefined - und dieser Wert ändert sich nie, das ist, warum Sie nicht den Hörer ausgeführt.
    Um zu überprüfen, ob die Größe des übergeordneten Elements geändert, können Sie überprüfen, in die $watch-Funktion wie diese: 

    scope.$watch(
    function () { 
        return {
           width: element.parent().width(),
           height: element.parent().height(),
        }
   },
   function () {}, //listener 
   true //deep watch
);

    Darüber hinaus denken Sie daran, wenn Sie verwenden möchten, ein bereits bestehendes Modul kann man es nicht nennen, wie diese angular.module('myModule', []) denn dies bedeutet die Schaffung neuer module. Sie müssen übergeben Sie einfach den Namen des Moduls angular.module('myModule'), die zweite Sache, warum dein code nicht funktioniert hat.

    Aktualisiert die fiddle und es funktioniert. \m/
    Dieses funktioniert nicht wie erwartet - wenn die Größe des Fensters/browser - $ - Uhr ist nicht genannt.
    Das ist eine Arbeit. hat mir geholfen
    Dies funktioniert, obwohl die Uhr wird nur ausgelöst, auf einen digest.
    youtube.com/watch?v=YyCJNRTBgpA

    InformationsquelleAutor getOffMyLawn

Schreibe einen Kommentar