2

我不确定是否有人问过这个问题，但是从 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 数组中添加和删除项目？

4

2 回答 2

0

在指令中操作模型是要走的路。应该避免直接的 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 元素时，指令会更有意义。对于一种情况，您始终可以对控制器范围进行操作，而 Angular 的数据绑定功能应该完成其余的工作。

于 2013-09-26T13:05:17.650 回答
0

无论如何，您将可以访问 DOM 的内部状态，并且可以更改指令内的模型，但指令是自定义控件，旨在跨各种页面使用，因此理想情况下它应该像其他控件一样运行，并且必须将自定义逻辑委托给服务/控制器，以便指令可以重复使用而无需更改

于 2013-09-26T13:03:45.133 回答