element.on ('click') в директиве в ng-if не работает

Question

Я использую директиву по ссылкам для предоставления модального входа, если пользователь не вошел в систему. И он отлично работает для всех случаев использования до сих пор. В новом случае директива является частью секции ng-if.

В фрагменте первая ссылка работает нормально, вторая не работает. element.on('click', function(evt) {…}) никогда не будет звонить. И разрешения не проверяются, и модальный логин не запрашивает пользователя.

Хорошо, если я использую ng-show вместо ng-if, обе ссылки работают. Поскольку ng-show не удаляет элемент из DOM и не создает дочернюю область, такую ​​как ng-if. Но в моем случае я должен использовать ng-if. Что я могу сделать? Как я могу предоставить событие click, которое также работает в директивах 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(); 
    }); 

}