AngularJS 指令范围没有更新它的模板

Question

在 AngularJS 中，我可以成功地将数据从控制器绑定到指令。我还可以在指令中设置其他 $scope 属性并将它们反映在模板中最初。

但是，当我通过指令更新范围时（在最初加载所有内容之后），这些更改不会应用到模板中。

例如...

控制器

app.controller('FooCtrl',function($scope){
    $scope.bar = ['one','two','three'];
});

指令

app.directive('fooDirective',function($window){
  return {
    restrict: 'AE',
    replace: true,
    transclude: 'element',
    scope: {
      foo: "="
    },
    template: '<h1>{{foo}} - {{test}}</h1>',
    link: function(scope, element, attrs, ctrl){

      scope.test = 3;

      angular.element($window).bind('resize',function(){
        console.log('the screen has resized');
        scope.test = scope.test + 1;
      });
    }
  };
});

HTML

<body ng-controller="FooCtrl">
    <foo-directive data-foo="bar"></foo-directive>
</body>

所有这些代码都使用来自控制器范围和指令范围的数据正确地呈现模板。当我调整页面大小时，console.log 被命中，但范围更新未反映在模板中。为什么会这样？我该如何解决这个问题？

这是plunker example

Answer 1

由于您是在 Angular 上下文之外处理 jQuery 事件，因此您需要调用 $apply 来触发 $digest：

link: function(scope, element, attrs, ctrl){

  scope.test = 3;

  angular.element($window).bind('resize',function(){
    scope.$apply(function() {
        console.log('the screen has resized');
        scope.test = scope.test + 1; 
    });

  });
}

Updated Plunker