Question

我不确定这个问题是否被问过，但是从AngularJS指令中弄乱数据模型是不是良好做法（不是可以做的）？

例如，如果在我的控制器中我有一些对象，例如：

 app.controller("MyCtrl", function () {
      $scope.obj.setOfKnives = ["Ginsu", "Steak"];
 });

我有一个带有指令的按钮就像（为了简洁而写）：

 <button add-knife>Add a Knife</button/>

在那个add-knife指令中，混淆setOfKnives数组是不错的做法（再次，不是可以做的），如：

 app.directive("addKnife", function () {

      return {
          "restrict": "A",
          "link": function (scope, element, attr) {
                scope.addAKnife = function (theKnife) {
                    scope.obj.setOfKnives.push(theKnife);
                };

                element.on("click", function () {
                    scope.addAKnife("Serrated");
                });
          }
      };
 });

（我相信最好使该指令成为带有模板的元素指令......）
这是一个好习惯吗？或者我应该使用该指令将DOM对象添加到页面并让一些控制器函数负责根据DOM添加和删除setOfKnives数组中的项目吗？

Answer 1

无论如何，你可以访问DOM的内部状态，你可以在指令中更改模型，但是指令是自定义控件，它们被设计用于各种页面，所以理想情况下它应该像其他控件一样运行，并且必须将自定义逻辑委托给Services /控制器使得指令可以不加改变地重复使用

Answer 2

在指令内操作模型是可行的方法。应避免直接DOM操作。

为了使指令更加模块化，您可以将数组作为指令的属性传递，并创建一个隔离的范围，这限制了控制器与指令之间共享的内容。

<button add-knife knives="setOfKnives" >Add a Knife</button/>

指令

app.directive("addKnife", function () {

      return {
          "restrict": "A",
           scope:{ knives:'='},
           "link": function (scope, element, attr) {
                 scope.addAKnife = function (theKnife) {
                    scope.knives.push(theKnife);
                };

          }
      };
 });

当您将指令视为可重复使用的UI元素时，指令会更有意义。对于一个关闭的情况，你总是可以对控制器范围进行操作，角度的数据绑定功能应该完成其余的工作。

AngularJS指令和模型

2 个答案: