Question

似乎指令正在替换模板，然后运行信任资源功能，更新源，然后它再次更新模板并陷入循环。但这是推荐的方法?? 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>'
    };
}]);

这是一个工作小提琴：

http://jsfiddle.net/kmturley/mgosw7kx/4/

Answer 1

您正在使用视频属性中的字符串与范围内的$ scope变量进行双向绑定：{ videos: '=' }这不是应该如何使用的。

根据文件：

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

你可以：

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

或使用'＆amp;'它将返回一个在父作用域的上下文中执行的函数：

＆安培;或＆amp; attr - 提供在上下文中执行表达式的方法父范围。如果未指定attr名称，则为属性名称假设与本地名称相同。

在这种情况下，你必须这样做：

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

有关隔离范围的更多信息：$compile

AngularJS使用指令模板和可信资源的摘要周期限制

1 个答案: