AngularJS指令手錶父母高度變化

Question

我是新來的角，想知道如果我可以添加一個指令到目標div，監聽父div的高度/寬度就像在JavaScript上的onchange事件，並調整目標div的高度/寬度相應...

我已經看着$ scope.watch，並懷疑這是我所需要的。

Answer 1

• 是的，你可以有一個父指令，可以觀察高度/寬度的變化。
• 然後，從子指令需要父指令的控制器並觀察它。

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 
     ) 
     } 
    } 

})