angularjs - Angular 不更新绑定(bind)属性

Question

Fiddle

HTML:

<div ng-controller="MyCtrl">
    <button my-event-directive>Click me</button>
    <div>{{secret}}</div>
</div>

JS:

var myApp = angular.module('myApp',[]);

myApp.directive('myEventDirective', function() {
      return {
        link: function(scope, element) {
            element.on('click', function(event){
                scope.$emit('myEvent', {secret: 'aaa'}); 
            });
        }
      }
})

function MyCtrl($scope) {
    $scope.secret = 'bbb';
    $scope.$on('myEvent', function(event, data){
        alert('event received!');
        $scope.secret = data.secret;
    });
}

单击按钮后， Controller 接收到事件(出现警报)。但是，{{secret}} 绑定(bind)不会更新它的值。为什么？

当然，我的事件创建在实际代码中更为复杂。

Answer 1

正如@Cherinv 在评论中回复的那样，在 Angular $apply 方法之外更改范围属性时，您必须手动调用它。 @runTarm 还建议事件调度程序应该使用 $apply 因为这样听众就不用记住它了。所以:

scope.$emit('myEvent', {secret: 'aaa'});

应该改为:

scope.$apply(function() {
    scope.$emit('myEvent', {secret: 'aaa'});
});

$apply 方法在以下文章中有详细描述:http://jimhoskins.com/2012/12/17/angularjs-and-apply.html