Сфера не распространяется в моей директиве AngularJS?

Question

У меня есть эта простая разметка:

<div ng-app="superApp" ng-controller="myCtrl"> 
    <superhero> HOVER ME </superhero> {{a}} 
</div> 

Следующий код изменяет {{a}} в 444:

var app = angular 
     .module('superApp', []) 
     .controller('myCtrl', ['$scope', function ($scope) 
     { 
      $scope.a = 444; 
     }]) 

Результат:

HOVER ME 444 

Теперь добавьте код для директивы:

app.directive('superhero', [ 
     function() 
     { 
      return { 
       restrict: "E", 
       controller: function ($scope) 
       { 
        $scope.a = 555; 
       }, 
       link: function (scope, element, attrs) 
       { 
        element.bind("mouseenter", function() 
        { 
         scope.a = 999; 
        }); 
       } 
      } 
     } 
]); 

В результате:

HOVER ME 555 

Это означает, что одно и то же объем, как контроллер видит.

Но если я парить ярлык, то {{a}} не меняется на 999

Вопрос

Почему не {{a}} изменен 999? разве это не тот же масштаб?

Также - Batarang показывает 2 области применения как ng-app ???

jsbin

Answer 1

Это происходит потому, что ваш mouseover событие выходит за рамки углового. Это событие jQuery.

Есть два решения, лучше всего использовать основные директивы, такие как ng-mouseover в вашем шаблоне директив, если он использует один. Или в обработчике событий jQueries используйте $scope.$apply().

element.bind("mouseenter", function() 
{ 
    scope.$apply(function(){ 
     scope.a = 999; 
    }); 
}); 

http://jsbin.com/buzuveludu/1/edit?html,js,output