通過指令AngularJS DOM操縱

Question

目前我有一個工作角應用程序....它的工作原理，但即時通訊在我的控制器中做一些DOM操作的東西，而不是像我應該這樣的指令。問題是，我的問題變成了，我如何正確使用指令來實現這種功能？

一個簡單的例子是：

<div id="container1"></div> 

<button type="button" ng-click="changeSize(1)">Small</button> 
<button type="button" ng-click="changeSize(2)">Medium</button> 
<button type="button" ng-click="changeSize(3)">Large</button> 

這將從根本上呼籲在我的控制器的changeSize方法，或採取如下所示：

$scope.changeVideoSize = function(size) { 
    switch (size) { 

     case 1: 
      resizeDiv("container1", "320px" , "240px"); 
     case 2: 
      resizeDiv("container1", "640px" , "480px"); 
     case 3: 
      resizeDiv("container1", "1280px" , "960px"); 
    } 
} 
function resizeDiv(id, width, height) { 
    var elem = document.getElementById(id); 
    elem.style.height = height; 
    elem.style.width = width; 
} 

Answer 1

您可以創建一個指令，看起來像

angular.module('myApp.directives', []). 
    directive('changeSize', [function() { 
     return function(scope, elm, attrs) { 

      function resizeDiv(id, width, height) { 
       var elem = document.getElementById(id); 
       elem.style.height = height; 
       elem.style.width = width; 
      } 

      elm.bind("click", function(){ 
        switch (attrs.size) { 
         case 1: 
          resizeDiv("container1", "320px" , "240px"); 
         case 2: 
          resizeDiv("container1", "640px" , "480px"); 
         case 3: 
          resizeDiv("container1", "1280px" , "960px"); 
        } 
      }); 
     }; 
    }]); 

然後將您的標記更改爲：

<div id="container1"></div> 

<button type="button" change-size size="1">Small</button> 
<button type="button" change-size size="2">Medium</button> 
<button type="button" change-size size="3">Large</button> 

Answer 2

@MDiesel，你的例子演示了一個指令的用戶，但我認爲它有一些缺陷。 我相信應該在執行DOM操作時使用指令，或者對於具有API的可重用組件。

假設使用情況下是純DOM操作不會被重用，我會寫：現在

angular.module('myApp.directives', []). 
    directive('resizeable', [function() { 
     return { 
      // Might be better to use a URL instead for better readability\maintainability. 
      template: '<div id="container1"></div>' + 
         '<button type="button" ng-click="changeSize(1)">Small</button>' + 
         '<button type="button" ng-click="changeSize(2)">Medium</button>' + 
         '<button type="button" ng-click="changeSize(3)">Large</button>', 
      link: function(scope, element) { 
       scope.changeSize = function (size) { 
        var containerElement = element.find('#container1'); 
        switch (size) { 
         case 1: 
          containerElement.width(320); 
          containerElement.height(240); 
         case 2: 
          containerElement.width(640); 
          containerElement.height(480); 
         case 3: 
          containerElement.width(1280); 
          containerElement.height(960); 
        } 
       } 
      }     
     } 
    ]); 

1. 指令是自包含的，你不應該使用文件來改變DOM ，它忽略了指令的要點。
2. ng-click比自己傾聽點擊事件要好，它使得模板更加自我解釋。

如果用例使該指令可重用並可能包含許多元素，則是另一種情況。讓我知道，我會寫這個。