AngularJS在没有隔离范围的情况下设置绑定

时间:2013-10-28 14:08:17

标签: angularjs angularjs-scope

这是实现父指令范围内附加对象的只读绑定的方法吗?

如果父级更改了“$ scope.thing”,我真的需要子指令来接收更改通知。

基本上,我现在正在轮询。我想要一个回调方法。

angular.module('plunker', [])
.directive('myParent', function($compile) {
  return {
    controller: function($scope, $log) {
      $scope.thing = { awesome: 'sucky' };
      var count = 0;
      setInterval(function() { $scope.thing = { awesome: 'cool'+count++ }}, 2000); 
    },
    template: '<div><div my-child entity="thing"></div></div>'
  };
})
.directive('myChild', function($parse, $log) {
  return {
    controller: function($scope) {
    },
    link: function(scope, element, attrs) {
      var expression = attrs['entity'];
      scope.onetime = $parse(expression)(scope);
      $log.log('onetime');
      $log.log(scope.onetime);

      setInterval(function () {
          if (expression) {
              scope.intervaled = $parse(expression)(scope);
              scope.$apply();
              $log.log('interval');
              $log.log(scope.intervaled);
          }
      }, 2000);
    }, 
    template: '<span>{{onetime}}</span>-<span>{{intervaled}}</span>'
  };
})

强制性的plnkr:

http://plnkr.co/edit/2jfa1dcwguO400zRjJxU?p=preview

1 个答案:

答案 0 :(得分:3)

而不是合并只是利用AngularJS $ digest循环并观察属性中的变化:

  var entityValue = $parse(attrs.entity);

  scope.$watch(entityValue, function(newValue, oldValue){
     scope.intervaled = newValue;
  });

$scope.$apply应该总是在你知道你不在AngularJS世界的地方被调用 - 在这种情况下在发送端:

    setInterval(function() { 
      $scope.$apply(function(){
        $scope.thing = { awesome: 'cool'+count++ }  
      })
    }, 2000)

最后是工作插件:http://plnkr.co/edit/LBwl5IeA3rXrHfTLEFMZ?p=preview

请注意,拥有一个不会隔离范围的模板的指令正在玩火,因为您的指令可能很容易覆盖应用程序其他部分所需的数据(在您的情况下为intervaled)。