【问题标题】:AngularJS set up binding without an isolate scopeAngularJS 设置没有隔离作用域的绑定
【发布时间】:2013-10-28 14:08:16
【问题描述】:

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

如果父级更改它的“$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

【问题讨论】:

    标签: angularjs angularjs-scope


    【解决方案1】:

    只需利用 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)。

    【讨论】:

    • 感谢,特别感谢有关隔离范围的提示。所以一般来说,如果我的指令有模板,我应该使用隔离范围?
    • 是的,我想说一个好的经验法则是:如果你有一个模板可以读取 directive specific 模型(这意味着你有指令范围内的特定变量),您应该隔离范围以避免潜在的冲突。
    猜你喜欢
    • 2014-12-17
    • 2011-01-10
    • 1970-01-01
    • 2015-02-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-03-18
    • 1970-01-01
    相关资源
    最近更新 更多