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

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;
})

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

UPDATE

指令d1的模板

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

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

我必须在指令的事件监听器中再次调用scope.$ apply() d1

希望这是正确的方法.

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)
      })*/
    }
  }

}])

从我的角度来看,这是在没有太多麻烦的情况下实现独立对象/指令之间通信的最简洁方法.而且代码非常干净且分离.

你怎么看？