AngularJS HTML5 video ng-src empty from directive -

AngularJS HTML5 video ng-src empty from directive -

my application loads several objects rest service. each object contains property represents uri of video file. application takes source display several videos user.

because need grab when user plays video (event), load html5 video markup using angular directive:

app.directive("avideo", function($http){ homecoming { template: '<video class="col-xs-12 col-sm-12 col-md-12" ng-src="[[[creativeviewmodel.post.addtrusteduri()]]]" controls preload="metadata"</video>', scope:{ creative: "=", }, link: function(scope, element, attrs) { $(element).find("video").on("play", function () { $http.post('/post/' + scope.creative.post.doc_id + '/views?_csrf=' + csrftoken) .success(function(data){ }) .error(function(error){ }); }); }, }

});

consequently, html markup video this:

<div a-video creative="creativeviewmodel"></div>

the function addtrusteduri part of object itself, follows:

addtrusteduri: function addtrusteduri() { homecoming $sce.trustasresourceurl(this.post.media); },

however, next code given user browser:

<video class="col-xs-12 col-sm-12 col-md-12" ng-src="" controls="" preload="metadata" <="" video=""></video>

as can see, ng-src attribute shows empty, though using $sce.trustasresourceurl method enable it. note domain video files beingness loaded not same app's domain (it's cdn).

any ideas on how prepare problem?

you're dynamically adding directive (ngsrc) in template. angular recognize expression, need transclude: true explained in angular docs under directive.

angularjs angularjs-directive angularjs-scope