这里是plunker example

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

由于您在角度上下文之外处理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

AngularJS指令范围不更新它的模板

控制器

指令

HTML

这里是plunker example

1 个答案: