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 。

指令不在watch（或watchCollection）上更新

1 个答案: