如何在 AngularJS 中同时处理 DOM 操作和状态更改

Question

<div my-directive>
<btn id="myBtn" ng-click="handleClick(mymodel.id)"><btn>
</div>
app.controller('myCtrl', function($scope) {
  $scope.handleClick = function(id) {
    //Do state change here but don't access DOM here.
  }).
  directive('myDirective',function() {
    return {
      link: function (scope, element) {     
        var myBtn = angular.element(document.querySelector("#myBtn"));
       //Binding for second time! that I want to avoid. But.
        myBtn.bind('click', function(e) {
          var url = "data://adsf"; // Url is generated here because I need access to               
                                   //element to generate url.
          //Call $scope function here for handling generated url.
     });
   }
 }
});

在上面的例子中，事件到myBtn绑定了两次，在ng-click和绑定函数中。如何在不访问 DOM 或其在控制器内部的操作的情况下避免它？

博士
如何以及在何处根据 AngularJS 指南同时设置状态和操作 DOM。

Answer 1

我不完全清楚为什么你不喜欢 2 个事件处理程序。多个事件处理程序是事件系统的设计工作方式，只要它们是独立的，这里似乎就是这种情况。

但是，如果事件处理程序是相互依赖的，则可以让指令定义自己的"onClick"处理程序。

.directive("myDirective", function(){
   return {
     scope: {
        btnClicked: "&"
     },
     link: function(scope, element) {
        //...
        myBtn.bind('click', function(e) {
           // ...
           scope.btnClicked();
           // or, for example, with url param
           // scope.btnClicked({url: url});
        });
     }
   }
});

然后，按如下方式连接handleClick：

<my-directive btn-clicked="handleClick(mymodel.id)">

或者，使用url参数：

<my-directive btn-clicked="handleClick(mymodel.id, url)">

当然，最好更具体地命名它，比如"onClose" - 如果这是一个"关闭"（X）按钮，或者"onPlaybackStarted"，或者"urlLoaded"等......你明白我的意思。