Question

请考虑以下情况。

有两个指令彼此独立，我想分享这两个指令之间的范围。由于它们不是嵌套的，我不能在指令中使用控制器来共享范围。所以我创建了一个服务并将服务注入到这两个指令中。

因此，当在一个指令中更改服务的值时，我需要在另一个指令中更新它。我怎样才能做到这一点？我希望这样做是正确的，有角度的方式，没有反模式。

这是我到目前为止所尝试的

.directive('d1', ['cData', function() {
  return {
    link: function() {
       // this watch is not working
       scope.$watch( function() {
            return cData.Value;
       }, function(newValue, oldValue) {
            alert(newValue);
       })
       }
  }
})
.directive('d2', ['cData', function() {
  return {
    link: function() {
      element.on('click', function() {              
        cData.Value = false
        scope.$digest();
      });
      // A watch here is working, I have commented it out
      /*scope.$watch( function() {
            return cd.showStatus;
      }, function(newValue, oldValue) {
            alert(newValue)
      })*/
    }
  }
}])
.service('cData', function() {
  this.Value = false;
})

我正在更新指令d2的点击事件中的服务价值，我需要在指令d1中触发监视。可能这不起作用，因为两个指令的范围不同。我怎样才能做到这一点，非常感谢任何帮助。

更新

指令 d1

的模板

template : '<div ng-class="{show:cData.Value==true}"></div>'

更新{show:cData.Value==true}

我必须在指令d1的事件监听器中再次调用scope。$ apply（）

希望这是正确的方法。

Answer 1

您走的是正确的道路，但我建议您使用$broadcast而不是添加新的$watch。添加新的观察者更多是本地范围的解决方案（至少在我看来）。所以这一切归结为在两个独立对象之间共享数据。你可以这样做：

.directive('d1', ['cData', function() {
  return {
    link: function(scope) {
       // this watch is not working
       scope.$on('data:changed', function(e, data) {
          alert(data);
       }
       /*
       scope.$watch( function() {
            return cData.Value;
       }, function(newValue, oldValue) {
            alert(newValue);
       }) */
       }
  }
})
.directive('d2', ['cData', '$rootScope', function() {
  return {
    link: function() {
      element.on('click', function() { 
        $rootScope.$broadcast('data:changed', { value: false });             
        // cData.Value = false
        // scope.$digest();
      });
      // A watch here is working, I have commented it out
      /*scope.$watch( function() {
            return cd.showStatus;
      }, function(newValue, oldValue) {
            alert(newValue)
      })*/
    }
  }

}]）

从我的观点来看，它是实现独立对象/指令之间通信的最简洁方法，没有太多麻烦。而且代码非常干净且分离。

你怎么看？

Answer 2

这些指令的html如何？你能添加属性吗？因为你可以看到这些属性。

我不喜欢事件传播。

AngularJS：注册服务的监视范围值在一个指令中从另一个指令更改

2 个答案: