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

Question

考虑以下场景。

有两个相互独立的指令，我想共享这两个指令的作用域。由于它们没有嵌套，我不能在指令中使用控制器来共享范围。所以我创建了一个服务并将该服务注入到这两个指令中。

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

这是我目前尝试过的方法

.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}

我必须在指令的事件侦听器中再次调用 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)
      })*/
    }
  }

}])

在我看来，这是实现独立 objects/directives 之间通信的最干净的方式，没有太多麻烦。而且代码非常干净和解耦。

你怎么看？

Answer 2

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

我不喜欢事件传播。

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

AngularJS : Watch scope value of a injected service changed in one directive from another directive

javascript

angularjs

angularjs-directive

angularjs-scope