指令未在手表（或 watchCollection）上更新

Question

我试图有一个指令，当集合收到更新时更新，但似乎无法触发监视事件（或$watchCollection）。

在我的工厂里，我有一个收藏

var streams = {
     "main":{ stream: streamDetails},
     "guest":{ stream: streamDetails}
}

我通过

将其包含在我的控制器中

.controller('vidCtrl', function($scope, vidFactory){
     $scope.streams = vidFactory.streams;
});

在我的html中，我有

<stream data-name="main"></stream>
<stream data-name="guest"></stream>
<stream data-name="other"></stream>

管理视频的指令是

app.directive('stream', function(){
       return {
             restrict: 'E',
             template: '<video></video>',
             scope:{
               name: '='
             },
             link: function(scope, element, attr){
              if(!scope.streams[scope.name]) return console.log('video not ready');
              var vid = scope.streams[scope.name];
               var video = element.find('video');
               video.attr('src', vid.stream);
               video[0].play();
             }
       }
});

我要做的是将other 流添加到$scope.streams，然后让它显示在正确的标签中。

我希望在我的指令中添加

scope.$watchCollection('videos', function(){
      //update stream somehow
});

但不幸的是，当我向视频对象添加新视频时，$watchCollection 没有被触发。

我正在通过以下函数添加到vidFactory.videos，我可以验证它是否正确更新了集合。当然，在工厂里，我不能使用$scope.$apply()，如果我把.on方法放在控制器中，它会触发多次，因为控制器包含在几个不同的角度指令中。

qc.on('video:added', function(stream){
    streams[stream.name] = stream;
});

我也尝试通过 $watchCollection 观看特定的流

if(!scope.streams[scope.name]){
 scope.streams[scope.name]=null;
 scope.$watch(scope.streams[scope.name], function(){
   //add video to stream method would go here
 }, true);

我认为使用手表比$watchCollection 更受欢迎，但我不明白为什么我的控制器没有触发$watch。

Answer 1

您正在尝试访问scope.streams，就好像它是在您的指令范围内定义的一样。

但是，由于您的指令使用隔离作用域，它不会从其父作用域继承 streams。

你可以像这样将它传递给指令：

<stream data-streams="streams" data-name="other"></stream>

app.directive('stream', function () {
    return {
        restrict: 'E',
        template: '<video></video>',
        scope: {
            streams: '=',
            name: '@'
        },
        ...

---

另请参阅此short demo。