прохождение переменной сфера из директивы ссылки

Question

Я сделал angularjs директиву, как показано ниже:

angular.module('myApp') 
.driective('myDirective', function(){ 
return { 
    templateUrl: 'directive.html', 
     restrict: 'E', 
     scope: { 
     'dirObj': '=object' 
     }, 
     link: function (scope, element, attrs) { 
     scope.message = "View Message"; 

     element.bind('mouseenter', function(){ 
      scope.overState = true; 
      console.log('enter'); 
     }); 

     element.bind('mouseleave', function(){ 
      scope.overState = false; 
      console.log('leave'); 
     }); 

     } 
}; 
}); 

и внутри directive.html:

<h1>{{ message }}</h1> 
<div ng-show="overState">This text doesn't appear!!!</div> 

Вот живой код на plunkr

Проблема в том, что область внутри element.bin не устанавливает значение переменной «overState», кто-то может объяснить, почему это происходит Как исправить это.

Answer 1

Вы должны использовать $scope.$apply:

scope.$apply(function() { 
    scope.overState = true; 
}); 

Угловые оберток большую часть своих встроенных директив автоматически, поэтому он будет обновляться через переваривать петли, но если вы свяжете свои собственные события (т.е. mouseenter и mouseleave) вас Вам нужно будет выкинуть петлю дайджеста.

Updated Plnkr

---

Обновление на основе комментариев ниже

Вы также можете использовать встроенный в угловых директивах ng-mouseenter и ng-mouseleave, и тогда не нужно будет беспокоиться о оценке углового выражение себя.

<div class="directive-area" 
    ng-mouseleave="overState = false" 
    ng-mouseenter="overState = true"> 
    <h1>{{ message }}</h1> 
    <div ng-show="overState">Test Text</div> 
</div> 

Built-in Directives Plnkr