无法从元素中删除 ng-click

Can't remove ng-click from element

我正在尝试禁用某些链接。它们在我们导航栏的第三方组件中,所以我不能只更改源 HTML,所以我想从我的控制器中删除 ng-click。我已经能够找到并更新元素,但 ng-click 事件仍在发生,即使在浏览器中检查元素显示它不再有 ng-click?

HTML:

<div ng-app="myApp" ng-controller='myController'>
  <div id="myDIV">  
    <ul>
      <li><a ng-click='value=value+1'>click me to add value</a></li>
      <li>not a link</li>
    </ul>
  </div>
  <input ng-model="value" />

Javascript:

var app = angular.module('myApp', []);

app.controller('myController', ['$scope',
  function($scope) {
    $scope.value = 0;
    var items = document.getElementById("myDIV").getElementsByTagName("ul")[0].getElementsByTagName("li");
    _.each(items, function(item){
      var link = item.getElementsByTagName('a');
      if(link[0]){
        console.log('before: ',link[0]);
        var myElement = angular.element( link[0] );
        myElement.removeAttr('ng-click');
        console.log('after: ',myElement);
      }
    });
  }
]);

Fiddle: http://jsfiddle.net/esoyke/s9gdxsc0/

嗯,你不应该那样做,但是......

setTimeout(function(){ 
  angular.element(link).unbind('click'); 
  console.log("unbind");
}, 100);

应该做 "ugly hack"。 为了更好地找到摆脱 setTimeout 的方法,因为 angular 以某种顺序绑定事件,之后你必须解除绑定。

不过,这是一个丑陋的 hack。你可以做得更好。也许有可能 "decorate" 你的 "closed source component" 之类的。