Modification de la taille du parent de la directive AngularJS
Problème
J'ai une directive simple qui exécute des mises à jour de dimensionnement sur un élément particulier. Cela surveille la taille de la fenêtre et effectue les ajustements en conséquence.
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(); });
}
};
}]);
Cela fonctionne très bien.
Il se trouve qu'à l'intérieur de la divbalise associée, j'ai un enfant div. Lorsque le parent est redimensionné, je souhaite apporter des modifications de positionnement sur l'élément enfant. Cependant, je ne parviens pas à déclencher le déclenchement.
Cela est appelé au démarrage, mais ne se déclenche pas lorsque l'élément est redimensionné ou que la fenêtre change:
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);
});
}
};
}]);
Quel type de configuration de liaison ou de surveillance dois-je utiliser pour vérifier le redimensionnement de l'élément parent?
Violon
La valeur que data.overlaytypevous observez dans la centerVerticaldirective n'est pas sur le scopedonc la valeur résultante est undefinedet cette valeur ne change jamais, c'est pourquoi vous ne faites pas exécuter l'écouteur. Pour vérifier si la taille de l'élément parent a changé, vous pouvez le vérifier dans la fonction $ watch comme ceci:
scope.$watch(
function () {
return {
width: element.parent().width(),
height: element.parent().height(),
}
},
function () {}, //listener
true //deep watch
);
De plus, rappelez-vous que lorsque vous souhaitez utiliser un module déjà existant, vous ne pouvez pas l'appeler ainsi angular.module('myModule', [])car cela signifie créer un nouveau module. Vous devez simplement passer le nom du module angular.module('myModule'), ce qui explique pourquoi votre code n'a pas fonctionné.