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指令在多個對象上觸發

回答

相關問題