Angular JS dynamic ng-src не работает в 1.2.0-rc.2

Я пытаюсь реализовать элемент видео в приложении angular JS, а ng-src не будет считывать переменную области видимости

Я использую 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>

Если я использую гораздо более раннюю версию AngularJS lib, она работает.

cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js (works)

Является ли это ошибкой в последней версии или она была специально отключена? Какая работа?

Ответ 1

после небольшой отладки я обнаружил, что ошибка такова:

<код > Ошибка: [$ интерполяция: noconcat] Ошибка при интерполяции: http://www.thebigdot.com/ {{file}} Строгое контекстное экранирование запрещает интерполяции, которые объединяют несколько выражений, когда требуется доверенное значение. См. http://docs.angularjs.org/api/ng.$sce

http://errors.angularjs.org/1.2.0-rc.2/ $интерполировать/noconcat? p0 = HTTP% 3A% 2F% 2Fwww.thebigdot.com% 2F% 7B% 7Bfile% 7D% 7D на http://code.angularjs.org/1.2.0-rc 0,2/angular.js: 78: 12 в интерполяторе $(http://code.angularjs.org/1.2. 0-РК-2/angular.js: 6953: 17) at attrInterpolateLinkFn (http://code.angularjs.org/1.2.0 -rc.2/angular.js: 5367: 27) at nodeLinkFn (http://code.angularjs.org/1.2.0 -rc.2/angular.js: 5121:13) на составномLinkFn (http://code.angularjs.org/1.2.0 -rc.2/angular.js: 4640: 15) at nodeLinkFn (http://code.angularjs.org/1.2.0 -rc.2/angular.js: 5115: 24) на составномLinkFn (http://code.angularjs.org/1.2.0 -rc.2/angular.js: 4640: 15) в составномLinkFn (http://code.angularjs.org/1.2.0 -rc.2/angular.js: 4643: 13) на publicLinkFn (http://code.angularjs.org/1.2.0 -rc.2/angular.js: 4549: 30) на http://code.angularjs.org/1.2.0-rc.2/angular.js: 1157: 27 angular.js: 7861 Код >

В этой статье объясняется, что происходит и как отключить Strict Contextual Escaping: http://docs.angularjs.org/api/ng.$sce

Ответ 2

Angular 1.2 поставляется по умолчанию с принудительным контекстным экранированием (SCE). Вам нужно немного настроить ваш код, чтобы он работал.

HTML

Измените разметку так, чтобы ng-src привязывалась к переменной, а не к переменной URL +, как вы ее устанавливали раньше:

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

JavaScript

Добавьте $sce, чтобы ввести поставщика SCE и использовать метод $sce.trustAsResourceUrl для установки videoUrl.

function MyControl($scope, $sce) {
    var videoUrl = 'http://www.thebigdot.com/1234.mp4';
    $scope.videoUrl = $sce.trustAsResourceUrl(videoUrl);
}

Здесь JS Bin demo этой установки в действии.

Ответ 3

Я создаю эту директиву

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>

Ответ 4

Я сделал простой взлом, прежде чем нашел предыдущий пост. Кто-то мог найти это полезное

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>";

Ответ 5

У меня была такая же проблема с версией 1.5.0 от angular. Когда я изменил версию (я взял релиз 1.4.8), моя проблема была решена.

.controller('MainCtrl',['$scope','$stateParams','DepartementFactory',
        function($scope,$stateParams,DepartementFactory) {
            $scope.currentDate=new Date();
            DepartementFactory.getDepartements().then(function(data){
               $scope.departements=data;
               $scope.departements.logo="work"; 
            });
        }
    ]
)

<div class="work">
    <a>
        <img src="images/{{departements.logo}}" class="media" alt=""/>
        <div class="caption">
            <div class="work_title">
                <h1>{{departements.libelle}}</h1>
            </div>
        </div>
    </a>
</div>