element.on('click') 在 ng-if 中的指令上不起作用

Question

如果用户未登录，我会在链接上使用指令来提供模式登录。 到目前为止，它适用于所有用例。在新情况下，指令是 ng-if 部分的一部分。

在代码段上，第一个链接工作正常，第二个链接不起作用。element.on('click', function(evt) {…})永远不会打电话。并且不会检查权限，并且不会向用户提示任何模式登录。

好的，如果我使用 ng-show 而不是 ng-if，这两个链接都可以工作。因为 ng-show 不会从 DOM 中删除元素，也不会像 ng-if 那样创建子作用域。但是在我的用例中，我必须使用 ng-if。我能做什么？如何提供一个在 ng-if 和其他 ng-x 指令中工作的点击事件？

var app = angular.module('myapp', []);
app.controller('MyCtrl', function($timeout) {
  // something stupid here
  var vm = this;
  vm.bar = false;
  $timeout(function() {
    vm.bar = true;
  });
});
/**
 * I need an isolate scope, because some user state checks
 * will take place in the directive. And there are different
 * login forms based on type and other attributes.
 */
app.directive('modalLogin', function() {
  return {
    restrict: 'A',
    scope: {
      type: '@mlType'
    },
    compile: function(element, attrs) {
      if (element[0].nodeName !== ('A')) {
        // use directive only at links
        return function() {};
      }
      return function(scope) {
        function checkPermissions() {
          // do the magic here
          alert('foo');
        }
        element.on('click', function(evt) {
          evt.preventDefault();
          checkPermissions();
        })
      }
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="myapp" ng-controller="MyCtrl as FOO">
  <div>
    <!-- it works -->
    <a href="/myroute/" modal-login ml-type="simple-login">Klick me, I'm working well</a>
  </div>
  <!-- it doesn't work -->
  <div ng-if="FOO.bar">
    <a href="/another-route/" modal-login ml-type="theme-login">Klick me, I'm nested within a ng-if</a>
  </div>
</section>

Answer 1

使用 link 而不是 compile 。

link: function(scope, element) {
  function checkPermissions() {
    alert('foo');
  }
  element.on('click', function(evt) {
    evt.preventDefault();
    checkPermissions();
  });
}