angularjs - 将方法作为字符串参数传递给指令不是一件坏事吗？

Question

在发现指令时，会遇到以下问题:

<div ng-app="twitterApp">
  <div ng-controller="AppCtrl">
    <div enter>Roll over to load more tweets</div>
  </div>
</div>

var app = angular.module('twitterApp', []);   
app.controller("AppCtrl", function ($scope) {
  $scope.loadMoreTweets = function () {
    alert("Loading tweets!");
  }
})

app.directive("enter", function () {
  return function (scope, element, attrs) {
    element.bind("mouseenter", function () {
      scope.loadMoreTweets();
    })
  }
})

他们说: “更好的做法是通过将 loadMoreTweets() 方法作为 View 中的字符串参数传递给指令，并从指令中的 attrs 参数中检索它来完全解耦 loadMoreTweets() 方法。”

所以它变成:

<div ng-app="twitterApp">
  <div ng-controller="AppCtrl">
     div enter="loadMoreTweets()">Roll over to load more tweets</div>
  </div>
</div>

app.directive("enter", function () {
  return function (scope, element, attrs) {
    element.bind("mouseenter", function () {
       scope.$apply(attrs.enter);
    })
  }
})

但这不会回到:

     **<div onClick="loadMoreTweets()">Roll over to load more tweets</div>**

这让我很困惑，JavaScript 再次与 HTML 混合在一起。我们不是在努力避免这种情况吗？我们现在使用 addEventListener() 和 AttachEvent() 还是我认为这是错误的。

Answer 1

这是我的两分钱。

这并不是说我们一定要从 HTML 中删除所有脚本调用，而是我们不想依赖 HTML 来让脚本工作。这样 HTML 就可以被替换，并且我们知道管道(在本例中为 AngularJS)仍然可以工作。您不想从墙的 Angular 引用任何需要 DOM 知识(除了指令)的东西( Controller 、服务)。

它清楚地分离了您的业务逻辑(然后可以进行测试)和您的 View (这几乎需要人工测试......直到人工智能变得更好)。

在某些情况下，例如单击事件， View 不可避免地需要了解底层脚本，如果一个使用另一个，它们就会连接起来。好处是在 Angular 方面，您只需要保持接口(interface)相同，并且可以更改实际的实现，而不会弄乱 View (它始终与接口(interface)有关并能够替换依赖项)。

基本上编写此指令，以便它使用参数来潜在地扩展其功能以调用任意函数，而不是将其绑定(bind)到仅执行一项特定任务，将避免重复和调整此代码的需要(不要重复自己，DRY) .

无论长短，解耦都很重要，但对相互协作的部分之间的接口(interface)有一些了解始终是必要的。有时，避免代码重复(因此，如果出现问题/调整，需要更新很多地方)的优势超过了将底层结构的任何知识隐藏在 View 之外的愿望。

请记住，addEventListener/attachEvent 仍然在这里发生，请参阅 element.bind 调用，这仍然允许多个事件处理程序。