AngularJS digest cycle limit with directive template and trusted resource

Question

It seems like the directive is replacing the template, then running the trust resource function, which updates the source, then it is updating the template again and getting stuck in a loop. But this is the recommended method?? The 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"}]' />

And this is the 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>'
    };
}]);

And here is a working fiddle:

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

Answer 1

You are using bi-directional bind between a string in your videos attribute and a $scope variable via scope: { videos: '=' } which is not how it should be used.

As per documentation:

= or =attr - set up bi-directional binding between a local scope property and the parent scope property of name defined via the value of the attr attribute. If no attr name is specified then the attribute name is assumed to be the same as the local name.

You can either:

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

Or use '&' which will return a function to execute in the context of the parent scope:

& or &attr - provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name.

In this case you would have to do:

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

More info on isolated scopes: $compile