Question

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

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

好的，如果我使用ng-show而不是ng-if，两个链接都有效。因为ng-show不会从DOM中删除元素，并且它不会像ng-if那样创建子范围。但在我的用例中，我必须使用ng-if。我能做什么？如何提供单击事件，该事件也适用于ng-if和其他ng-x指令？

＆＃13;

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();
        })
      }
    }
  }
})

＆＃13;

<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>

＆＃13;

Answer 1

使用link代替compile。

link: function(scope, element) {

  function checkPermissions() {
    alert('foo');
  }

  element.on('click', function(evt) {
    evt.preventDefault();
    checkPermissions();
  });

}

在ng-if中的指令上的element.on（＆＃39;点击＆＃39;）不起作用

1 个答案: