Javascript 带指令模板和受信任资源的AngularJS摘要周期限制

似乎指令正在替换模板，然后运行trust resource函数，更新源代码，然后再次更新模板并陷入循环。但这是推荐的方法？？html：

<player videos='[{"type":"mp4","src":"http://vjs.zencdn.net/v/oceans.mp4","poster":"http://www.videojs.com/img/poster.jpg","captions":"http://www.videojs.com/vtt/captions.vtt"},{"type":"webm","src":"http://vjs.zencdn.net/v/oceans.webm"}]' />

这是javascript：

module.directive('player', ['$sce', function ($sce) {
    'use strict';
    return {
        restrict: 'E',
        scope: {
            videos: '='
        },
        link: function (scope, element, attrs) {
            scope.trustSrc = function(src) {
                return $sce.trustAsResourceUrl(src);
            }
        },
        template: '<video preload="none" poster="{{ trustSrc(videos[0].poster) }}">' +
            '<source ng-repeat="item in videos" ng-src="{{ trustSrc(item.src) }}" type="video/{{ item.type }}" />' +
            '<track kind="captions" ng-src="{{ trustSrc(videos[0].captions) }}" srclang="en" label="English" />' +
            '</video>'
    };
}]);

这是一把小提琴：

---

您正在通过scope:{videos:'='}在videos属性中的字符串和$scope变量之间使用双向绑定，这不是应该使用的方式

根据文件：

=或=attr-在本地范围属性和通过值定义的名称的父范围属性之间设置双向绑定 属性的属性。如果未指定属性名，则属性 假定名称与本地名称相同

您可以：

scope: {},
link: function(scope, element, attr) {
   scope.videos = attr['videos'];
}

或者使用“&”，它将返回要在父作用域上下文中执行的函数：

&or&attr-提供在的上下文中执行表达式的方法 父范围。如果未指定属性名，则属性名 假定与本地名称相同

在这种情况下，您必须执行以下操作：

scope: {videos: '&'},
link: function(scope, element, attr) {
   scope.videos = scope.videos();
}

---

关于隔离作用域的更多信息：

啊，我完全错过了这个。谢谢，这里的工作链接：使用Wawy答案的工作版本