css - AngularJS 指令观察父级高度变化

Question

我是 Angular 的新手，想知道是否可以向目标 div 添加一个指令，该指令像 javascript 上的 onchange 事件一样监听父 div 的高度/宽度，并相应地调整目标 div 的高度/宽度...

我查看了 $scope.watch 并怀疑这就是我需要的。

Answer 1

• 是的，你可以有一个父指令来观察高度/宽度的变化。
• 然后，子指令需要父指令的 Controller 并观察它。

HTML :

<element-parent  height-width>
   <child-element-directive></child-element-directive>
<element-parent>

JS:

 app.directive('heighWidth', function(){

   return {
      scope: {
      },
      controller:function($scope){
         // .......... define setHeight and setWidth
         this.getHeightAndWidth = function(){
           // .......
         }
      },
      link : function(scope, elem, attrs){
          scope.$watch(function(){
             return {height: elem.height(), width: elem.width() };
          }, function(){
             ctrl.setHeight(elem.height());
             ctrl.setWidth(elem.width());
          } , true); // to compare the object value.
      }
   }


})



app.directive('childElementDirective', function(){

   return {
       require: 'heightWidth',
       link: function(scope, elem, attrs, ctrl){
          scope.$watch(
             function(){ 
                 return ctrl.getHeightAndWidth();
             },
             function(heightAndWidth){
                 // ........   
             }, 
             true
          )
       }
   }

})