AngularJS指令范围未更新其模板

debugcn 发表于 Dev

比利·麦基

在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，但范围更新未反映在模板中。为什么会这样，我该如何解决？

这是一个小例子

像素位

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

  });
}

更新的柱塞

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。