AngularJS 两个具有共享模型的控制器，控制器 2 没有看到模型的变化

Question

达到了我的 Angular 知识的上限，我一直在这个问题上兜圈子。

基本上我有视频播放器和章节列表指令，每个指令都有一个控制器。控制器使用相同的模型服务，如下所示：

  .service('VideoPlayerModel', function(){
      var model = this;
      model.chapters = {
          chapterPos: 0,
          targetChapter:null,
          data: []
      },
      model.getVideoData = function() {
          return model.videoData;
      };
      model.setVideoData = function(vData){
        ...
        ...
        ...
      };
  });

在视频播放器控制器中，随着播放器时间的更新，它会找到所需的章节数据并更新 model.chapters 数据，如下所示：

   updateChapter: function(currentTime){
    var chapters = VideoPlayerModel.chapters;
    var chaptersCtrl = videoPlayerCtrl.chapters;

    if (chapters.nextChapter.start <= currentTime) {
      chapters.chapterPos = chapters.chapterPos + 1;
      chaptersCtrl.setChapter(); //This finds and sets the Target Chapter
    }
  },

setChapter 运行后，我调用 console.log(VideoPlayerModel.chapters)，我可以看到数据模型已更新，结果如下：

Object {chapterPos: 1, targetChapter: Object, data: Array[6], nextChapter: Object}

但是，ChapterListCtrl 中的手表不会触发，并且任何显示 ChapterPos 的屏幕项目仍然只显示初始值 0。

控制器如下所示：

.controller("ChapterListCtrl", ['$scope', 'VideoPlayerModel', function($scope, VideoPlayerModel) {
  $scope.chapters = VideoPlayerModel.chapters;

  $scope.$watch(function() { return VideoPlayerModel.chapters; }, function(newValue, oldValue){ 
    $scope.chapters = newValue; 
    console.log("A Change"); // Only runs at initialisation.
  });
}])

我尝试了不同的方法并以这种方式结束，不确定我现在是否走错了方向。有人可以帮忙吗？

Answer 1

您不需要使用$watch、$broadcast 或$on。这最好通过常规的 JavaScript 思维来解决。

您的问题是$scope.chapters = newValue;，这就是您通过引入与您的服务无关的新对象来破坏控制器使用的绑定的地方。

您应该考虑您的服务model.chapters = {..} 并说嘿！这是我将使用的唯一对象。如果我想在任何地方更改此对象中的数据，我将切换对象内部的数据，而不是为我使用的引用分配新对象。

为此，我使用以下方法：

    transferDataList = function (from, to) {
        /*
            http://stackoverflow.com/questions/1232040/empty-an-array-in-javascript
        */
        to.length = 0;
        for (var i = 0; i < from.length; i++) { to.push(from[i]); }
    };

    transferDataMap = function (from, to) {
        /*
            http://stackoverflow.com/questions/684575/how-to-quickly-clear-a-javascript-object
        */
        var member;
        for (member in to) { delete to[member]; }
        for (member in from) { to[member] = from[member]; }
    };

当我想更改对象中的数据时，我不会这样做：

$scope.chapters = newValue;

我会这样做：

transferDataMap(newValue, $scope.chapters);

或者：

transferDataList(newValue, $scope.chapters);

这样您将保持绑定，并且您的 Angular 接口将始终更新。

Answer 2

您可以使用$broadcast() 和$on() 函数来实现您的要求。

$broadcast() 会将一个事件刷新到它的所有子控制器。因此，当您为共享模型设置新值时，您可以 $broadcast() 向所有控制器发送带有新值的事件。

在您的共享服务中添加广播方法。

model.setVideoData = function(vData){
    UpdateYourModel();
    // Inform that your model is updated 
    $rootScope.$broadcast('modelUpdated');
}

现在您可以在所有控制器中为事件 modelUpdated 添加监听器。

$scope.$on('modelUpdated', function () {
     $scope.controllerModel = VideoPlayerModel.getVideoData(); // Update your controller model
}

另外，将$rootScope 注入您的服务，

.service("VideoPlayerModel", ["$rootScope", function($rootScope){
     // define your service here.
}] );

就是这样！！！

希望对你有帮助。

Answer 3

尝试将您的观察者更改为：

$scope.$watch('chapters', function(newValue, oldValue){ 
    $scope.chapters = newValue; 
    console.log("A Change"); // Only runs at initialisation.
});

或者，如果这没有达到您想要的效果，您可以通过传递第三个参数来启用深度监视：

$scope.$watch('chapters', function(newValue, oldValue){ 
    $scope.chapters = newValue; 
    console.log("A Change"); // Only runs at initialisation.
}, true);

你的观察者不会触发，因为它总是返回相同的chapters，Angular 认为它没有改变，因为它通过引用进行检查。您的观察者也可以重构为：

  $scope.$watch(function() { return VideoPlayerModel.chapters.length; }, function(newValue, oldValue){ 
    $scope.chapters = newValue; 
    console.log("A Change"); // Only runs at initialisation.
  });