Javascript 通过指令进行AngularJS DOM操作

目前我有一个正在运行的angular应用程序。。。。它可以工作，但我在我的控制器中做一些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>

---

您可以创建一个如下所示的指令

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>

---

@mdisel，您的示例演示了指令的用户，但我认为它有一些缺陷。 我认为在进行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);
                     }
                }
            }                
        }
    ]);

指令现在是自包含的，您不应该使用文档来更改DOM，它忽略了指令的要点。 ng click比亲自聆听click事件要好，它使模板更易于解释。

---

如果用例是为了使该指令可重用，并且可能包含许多元素，那么它就是另一种情况。让我知道，我会写一篇关于这个的文章。

为了让它更具活力，是否适合做smally？是的，我更喜欢这样！所以我主要是让这个例子起作用。我的问题是，我不想在指令中创建div container1，因为它位于页面的其他位置。也就是说，我已经进行了一些登录，以确保进入changesize函数，并且正确地传递了该大小。。。但我的dom元素实际上从未调整大小。我开始怀疑这是否是因为我没有像上面所示在指令中创建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);
                     }
                }
            }                
        }
    ]);