AngularJS指令在多个对象上触发

我正在创建一个自定义指令，该指令根据屏幕大小将元素附加到DOM的特定部分。该功能应该触发$window.onresize & $window.onloadAngularJS指令在多个对象上触发

我遇到的问题是获取相同的指令在单个视图内多次触发。

在哪里我迷路是如何编译指令的页面上的每个元素。

HTML

<body ng-app="myApp"> 
<div ng-controller="myCtrl"> 
    <div appendy appendy-from="#right1" appendy-to="#left1" appendy-breakpoint="768"> 
     <h3>Should move Left1 to Right1 OR Right1 to Left1</h3> 
    </div> 
    <div appendy appendy-from="#right2" appendy-to="#left2" appendy-breakpoint="768"> 
     <h3>Should move Left2 to Right2 OR Right2 to Left2</h3> 
    </div> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-6 text-center"> 
       <h1>Left 1</h1> 

       <div id="left1"></div> 
      </div> 
      <div class="col-xs-6 text-center"> 
       <h1>Right 1</h1> 

       <div id="right1"></div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-6 text-center"> 
       <h1>Left 2</h1> 
       <div id="left2"></div> 
      </div> 
      <div class="col-xs-6 text-center"> 
       <h1>Right 2</h1> 
       <div id="right2"></div> 
      </div> 
     </div> 
    </div> 
</div>

var app = angular.module('myApp', []); 
app.controller('myCtrl', ['$scope', function ($scope) {}]); 
app.directive('appendy', function ($window) { 
return { 
    restirct: 'AE', 
    replace: 'false', 
    template: '', 
    link: function (scope, element, attributes) { 
     var appendy = function() { 
      scope.appendFrom = attributes["appendyFrom"]; 
      scope.appendTo = attributes["appendyTo"]; 
      scope.breakPoint = attributes["appendyBreakpoint"]; 

      var appendFrom = angular.element(document.querySelector(scope.appendFrom)); 
      var appendTo = angular.element(document.querySelector(scope.appendTo)); 
      var breakPoint = scope.breakPoint; 
      var clientWidth = document.documentElement.clientWidth; 

      if (clientWidth < breakPoint) { 
       appendFrom.append(element); 
      } else { 
       appendTo.append(element); 
      } 
     }; 

     $window.onresize = function() { 
      appendy(); 
     }; 

     $window.onload = function() { 
      appendy(); 
     }; 
    } 
}; 
});

在寻找其他的代码应该在调整大小的$窗口appendy功能连接到比元件发射的范围或装？

scope.appendy = function(){ 
//... 
//... 
} 

element.($window).bind('resize, load', function(){ 
    scope.appendy(); 
})

来源

2015-10-05 Full-Hybrid

希望你明白，'resize'在手动调整大小的过程中每秒发生多次，并且已添加到您希望它们的位置的元素会导致大量昂贵的dom操作 – charlietfl

超出这个真的不清楚你的问题是什么 – charlietfl

我完全理解'resize'在手动调整大小期间会出现很多次。我并不担心此时的性能，并且稍后会进行优化。我试图了解如何隔离指令来执行相同的功能。看小提琴的问题很明显。我在视图中有2条指令。只有1个工作，我试图让每个指令发射。 –

因为父范围由这两种情况下继承不绑定任何的这范围和使用angular.element($window)：

 var appendy = function() { 
      var appendFrom = attributes["appendyFrom"]; 
      var appendTo = attributes["appendyTo"]; 
      var breakPoint = attributes["appendyBreakpoint"]; 

      appendFrom = angular.element(document.querySelector(appendFrom)); 
      appendTo = angular.element(document.querySelector(appendTo)); 

      var clientWidth = document.documentElement.clientWidth; 

      if (clientWidth < breakPoint) { 
       appendFrom.append(element); 
      } else { 
       appendTo.append(element); 
      } 
     }; 

     angular.element($window).bind('resize load', appendy); 

    }

DEMO

来源

2015-10-05 22:16:53 charlietfl

感谢您澄清范围界定问题。在Angular上，对于仍然很绿的对象的整个范围都有一些了解。 [更新]（https://jsfiddle.net/wfuller/vjd15m72/8/） –

AngularJS指令在多个对象上触发

回答

相关问题