如何在AngularJS中同时处理DOM操作和状态变化？

<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和bind函数中。如何避免它没有任何访问DOM或控制器内的操作？根据AngularJS指导方针，如何设置状态并同时操作DOM。如何在AngularJS中同时处理DOM操作和状态变化？

来源

2015-01-14 sat

如果您使用指令 – dandavis

，您不需要硬编码的ng-click，那么为什么您需要第二个点击监听器？ –

我稍微更新了代码，我必须通过ng-click来传递模型数据。当然，我可以从指令调用handleClick，但模型不能通过指令访问？我想通过id来处理Click。 – sat

我不完全清楚为什么你不喜欢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}); 
     }); 
    } 
    } 
});

然后，丝如下：

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

或者与url PARAM：

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

当然，最好是更具体的名字，像 “的OnClose” - 如果这是一个“关闭”（X）按钮，或“onPlaybackStarted”或“urlLoaded”等 - 你明白我的观点。

来源

2015-01-14 19:43:44

如何在AngularJS中同时处理DOM操作和状态变化？

回答

相关问题