Javascript Angular JS dynamic ng src在1.2.0-rc.2中不起作用_Javascript_Angularjs

Javascript Angular JS dynamic ng src在1.2.0-rc.2中不起作用

javascript angularjs

Javascript Angular JS dynamic ng src在1.2.0-rc.2中不起作用,javascript,angularjs,Javascript,Angularjs,我试图在angular JS应用程序中实现一个视频元素，而ng src不会读取scope变量我使用的是1.2.0-rc.2 <!DOCTYPE html> <html ng-app="ngView"> <head> <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script> <script> var app =

我试图在angular JS应用程序中实现一个视频元素，而ng src不会读取scope变量

我使用的是1.2.0-rc.2

<!DOCTYPE html>
<html ng-app="ngView">

<head>
   <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>

   <script>
   var app = angular.module('ngView', []);
   function MyControl($scope){
      $scope.file = '1234.mp4';
   }
  </script>
  </head>
  <body ng-controller="MyControl">
      <video controls  ng-src="http://www.thebigdot.com/{{file}}"></video>
  </body>
</html>

这是最新版本中的错误还是故意禁用的？解决方法是什么？

经过一点调试后，我发现错误如下：


错误：[$interpolate:noconcat]插值时出错：{{file}
严格上下文转义不允许在需要可信值时连接多个表达式的插值。看
$interpolate/noconcat？p0=http%3A%2F%2Fwww.thebigdot.com%2F%7B%7B文件%7D%7D
在
在$interpolate（）
在kfn（）处
在nodeLinkFn（）
在kfn（）处
在nodeLinkFn（）
在kfn（）处
在kfn（）处
在publicLinkFn（）
在angular.js:7861

本文解释了正在发生的事情以及如何禁用严格上下文转义：

Angular 1.2附带了默认启用的严格上下文转义（SCE）。您需要稍微调整代码以使其正常工作

HTML 更改标记，使

ng src

绑定到一个变量，而不是之前设置的URL+变量：

<video controls ng-src="{{videoUrl}}"></video>

下面是这个设置的一个例子。

在找到上一篇文章之前，我做了一个简单的破解。有人会发现这很有用

HTML:

<div id="videoTag"></div>

Controller.js

document.getElementById("videoTag").innerHTML = "<video width='auto' height='auto' controls autoplay src=" + $scope.details.preview + ">Your browser does not support video</video>";

document.getElementById（“videoTag”）.innerHTML=“您的浏览器不支持视频”；

我建立了这个指令

app.directive('loadAudio', function($parse) {
  return {
    restrict: 'EA',
    scope: {
        source: '=',       
    },
    template: '<audio />',
    link: function(scope, iElement, iAttrs) {

      scope.$watch('source', function(value) {
        var audio = iElement.find('audio');

        audio.attr('src',  value);
      }, true);
    }
  }
});

app.directive（'loadAudio'，函数（$parse）{
返回{
限制：“EA”，
范围：{
来源：“=”，
},
模板：“”，
链接：功能（范围、IELENT、iAttrs）{
范围$watch（'源'），函数（值）{
var audio=iElement.find（'audio'）；
audio.attr（'src'，value）；
}，对）；
}
}
});

接下来是我在模板上写的内容

<load-audio source="your_src" ></load-audio>

我对angular的1.5.0版也有同样的问题。当我更改版本时（我接受了1.4.8版本），我的问题就解决了

.controller（'MainCtrl'、['$scope'、'$stateParams'、'departmentfactory'，
函数（$scope、$stateparms、departmentFactory）{
$scope.currentDate=新日期（）；
DepartmentFactory.GetDepartments（）.then（函数（数据）{
$scope.departments=数据；
$scope.departments.logo=“工作”；
});
}
]
)


{{departments.libelle}}

适用于我@ChrisNicola它不起作用，请查看元素查看器中的URL。嗯，你说得对，它看起来像一个带标签的bug。我建议将JSFIDLE示例提交给Github。它也抛出了一个JS错误。它可以处理图像，可能是因为它们不需要

src

中的“可信值”。请看下面的答案：我通过不连接值来实现它，只需在服务中格式化URL，而不是在视图中。对于发现此问题的新手，如果您使用SCE（Angular的现代版本默认启用），则需要将外域添加到白名单中。这又引出了另一个问题：白名单是最安全的解决方案。你不想随意使用

$sce.trustAsResourceUrl

，除非你绝对确定你可以信任生成的URL（即，通过插入用户控制的值，你不会让他们输入可能危害你应用程序安全的恶意值）。这在我看来仍然像是一个bug，因为他们提到他们没有将其用于[href]和img[src]值，但用于视频标记。也许这里也需要考虑视频/音频标记。这个例子很好地解释了如何将绝对路径硬编码到控制器中，但我仍然很难弄清楚如何迭代绑定到$scope的JSON文件；i、 e.更像OP的原始示例：ng src=“{{file}}”例如，假设我有很多视频要根据我通过$routeParams发送到路由器的id在我的模板中动态填充。任何建议都会有帮助。哦，事实上，我可以通过这里的答案来解决这个问题：虽然视频url很好，但您的演示不起作用。很好，我想要这个，但它只用于Json响应中的一个视频。在我的情况下，我想显示多个视频，所以请任何人可以帮助我？

app.directive('loadAudio', function($parse) {
  return {
    restrict: 'EA',
    scope: {
        source: '=',       
    },
    template: '<audio />',
    link: function(scope, iElement, iAttrs) {

      scope.$watch('source', function(value) {
        var audio = iElement.find('audio');

        audio.attr('src',  value);
      }, true);
    }
  }
});

<load-audio source="your_src" ></load-audio>