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

Question

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

在代码段中，第一个 link 工作正常，第二个不工作。 element.on('click', function(evt) {…}) 永远不会调用。并且不检查权限，不会向用户提示模态登录。

好的，如果我使用 ng-show 而不是 ng-if，那么 link 都可以。因为 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();
  });

}

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

element.on('click') on a directive within ng-if doesn't work

event-handling

angularjs

angularjs-directive

angular-ng-if