角度插值:从变量添加url时的interr错误

Question

我正在尝试向youtube网址添加动态ID,如下所示:

<iframe width="460px" height="415px" ng-src="{{post.youtube_id}}" frameborder="0" allowfullscreen></iframe>

这是我试图在src中添加的网址之一:https://www.youtube.com/embed/C-IiiFvfdVo

当我这样做时,我收到以下错误:

http://errors.angularjs.org/1.5.8/ $ interpolate/interr？p0 =%7B%7Bpost.youtube_id%7D%7D&p1 =错误%3A%20%5B%24sce%3Ainsecurl%5D%20http%3A% 2F%2Ferrors.angularjs.org%2F1.5.8%2F%24sce%2Finsecurl%3Fp0%3Dhttps%253A%252F%252Fwww.youtube.com%252Fembed%252FozXJ0QrEj2Y

angular.min.js:118错误:[$ interpolate:interr] http://errors.angularjs.org/1.5.8/ $ interpolate/interr？p0 =%7B%7Bpost.youtube ... ecurl%3Fp0%3Dhttps%253A %252F%252Fwww.youtube.com%252Fembed%252FozXJ0QrEj2Y处错误(天然)http://127.0.0.1:8000/static/common/angular/js/angular.min.js:6:412 在Function.Ka. INTERR(http://127.0.0.1:8000/static/common/angular/js/angular.min.js:210:135)与j(http://127.0.0.1:8000/static/common/angular/js /angular.min.js:104:438)在Array.(http://127.0.0.1:8000/static/common/angular/js/angular.min.js:128:471)在S.exp(http://127.0.0.1:8000/static/common/angular/ js/angular.min.js:106:51)在Object.pre(http://127.0.0.1:8000/static/common/angular/js/angular.min.js:79:374)的http:// 在la(http://127.0.0.1:8000/static/common/angular/js/angular.min.js)127.0.0.1:8000/static/common/angular/js/angular.min.js:16:71 : 81:90)at p(http://127.0.0.1:8000/static/common/angular/js/angular.min.js:66:149 )(anonymous function)@ angular.min.js:118(匿名函数)@ angular.min.js:90J @ angular.min.js:104(匿名函数)@ angular.min.js:128S.exp @ angular.min.js:106pre @ angular.min.js:79(匿名函数)@ angular.min.js:16la @ angular.min.js:81p @ angular.min.js:66g @ angular.min.js:58g @ angular.min.js:58g @ angular.min.js:58g @ angular.min.js:58(匿名函数)@ angular.min.js:58(匿名函数)@ angular.min.js:63d @ angular.min.js:59m @ angular.min.js:64(匿名函数)@ angular.min.js:305q @ angul ar.min.js:7(匿名函数)@ angular.min.js:305 $ digest @ angular.min.js:143 $ apply @ angular.min.js:146l @ angular.min.js:97J @ angular. min.js:102t.onload @ angular.min.js:103 angular.min.js:118错误:[$ interpolate:interr] http://errors.angularjs.org/1.5.8/ $ interpolate/interr？p0 =%7B%7Bpost.youtube ... ecurl%3Fp0%3Dhttps%253A%252F%252Fwww.youtube.com%252Fembed%252FozXJ0QrEj2Y在错误(天然)在http://127.0.0.1:8000/static/common/angular/js在J. 的函数.Ka.interr(http://127.0.0.1:8000/static/common/angular/js/angular.min.js:210:135)的/angular.min.js:6:412(http : //127.0.0.1:8000/static/common/angular/js/angular.min.js:104:438)在http://127.0.0.1:8000/static/common/angular/js/angular.min.js :128:471 at http://127.0.0.1:8000/static/common/angular/js/angular.min.js:127:103 at m.$ digest(http://127.0.0.1:8000/static/ common/angular/js/angular.min.js:143:43)at m.$ apply(http://127.0.0.1:8000/static/common/angular/js/angular.min.js:146:113) at l(http://127.0.0.1:8000/static/ common/angular/js/angular.min.js:97:322)在J(http://127.0.0.1:8000/static/common/angular/js/angular.min.js:102:34)(匿名函数) )@ angular.min.js:118(匿名函数)@ angular.min.js:90J @ angular.min.js:104(匿名函数)@ angular.min.js:128(匿名函数)@ angular.min. js:127 $ digest @ angular.min.js:143 $ apply @ angular.min.js:146l @ angular.min.js:97J @ angular.min.js:102t.onload @ angular.min.js:103

我该如何添加？

Answer 1

我在这里找到了答案:AngularJs没有加载外部资源

app.filter('trusted', ['$sce', function ($sce) {
   return $sce.trustAsResourceUrl;
}]);

然后在ng-src中指定过滤器:

<video controls poster="img/poster.png">
       <source ng-src="{{object.src | trusted}}" type="video/mp4"/>
</video>