Troubleshooting dynamic ng-src not functioning properly with Angular JS version 1.2.0-rc.2

Question

Troubleshooting dynamic ng-src not functioning properly with Angular JS version 1.2.0-rc.2

I'm currently facing an issue while trying to incorporate a video element into my Angular JS app. The ng-src is not recognizing the scope variable that I have set.

The version of AngularJS I am using is 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>

Interestingly, if I switch to an older version of AngularJS library like cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js, it works perfectly fine.

So, I’m left wondering whether this is a bug in the latest release or if there has been a deliberate change made to disable this feature. Any ideas on what could be causing this and how to work around it?

javascript angularjs

Answer 1

Answer №1

Angular 1.2 comes with Strict Contextual Escaping (SCE) enabled by default. Making it work requires a minor adjustment to your code.

HTML

To make ng-src bind to a variable instead of a URL + variable, modify the markup as follows:

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

JavaScript

Inject the SCE provider using $sce and utilize the $sce.trustAsResourceUrl method to set the videoSource.

function MyController($scope, $sce) {
    var videoSource = 'http://www.example.com/1234.mp4';
    $scope.videoSource = $sce.trustAsResourceUrl(videoSource);
}

Check out this JSFiddle demo for a demonstration of this implementation.

Answer 2

Angular 1.2 comes with Strict Contextual Escaping (SCE) enabled by default. Making it work requires a minor adjustment to your code.

HTML

To make ng-src bind to a variable instead of a URL + variable, modify the markup as follows:

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

JavaScript

Inject the SCE provider using $sce and utilize the $sce.trustAsResourceUrl method to set the videoSource.

function MyController($scope, $sce) {
    var videoSource = 'http://www.example.com/1234.mp4';
    $scope.videoSource = $sce.trustAsResourceUrl(videoSource);
}

Check out this JSFiddle demo for a demonstration of this implementation.

Answer 3

Answer №2

Upon thorough investigation, I discovered the root of the issue:

Error: [$interpolate:noconcat] An error occurred while interpolating: http://www.thebigdot.com/{{file}} Strict Contextual Escaping prohibits concatenating multiple expressions when a trusted value is needed.  For more information, refer to [http://docs.angularjs.org/api/ng.$sce][1] 

http://errors.angularjs.org/1.2.0-rc.2/$interpolate/noconcat?p0=http%3A%2F%2Fwww.thebigdot.com%2F%7B%7Bfile%7D%7D
    at http://code.angularjs.org/1.2.0-rc.2/angular.js:78:12
    at $interpolate (http://code.angularjs.org/1.2.0-rc.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)
    at compositeLinkFn (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)
    at compositeLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:4640:15)
    at compositeLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:4643:13)
    at publicLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:4549:30)
    at http://code.angularjs.org/1.2.0-rc.2/angular.js:1157:27 <video controls="" ng-src="http://www.thebigdot.com/{{file}}"> angular.js:7861

This informative piece delves into the issue at hand and provides guidance on how to disable the Strict Contextual Escaping feature: http://docs.angularjs.org/api/ng.$sce

Answer 4

Upon thorough investigation, I discovered the root of the issue:

Error: [$interpolate:noconcat] An error occurred while interpolating: http://www.thebigdot.com/{{file}} Strict Contextual Escaping prohibits concatenating multiple expressions when a trusted value is needed.  For more information, refer to [http://docs.angularjs.org/api/ng.$sce][1] 

http://errors.angularjs.org/1.2.0-rc.2/$interpolate/noconcat?p0=http%3A%2F%2Fwww.thebigdot.com%2F%7B%7Bfile%7D%7D
    at http://code.angularjs.org/1.2.0-rc.2/angular.js:78:12
    at $interpolate (http://code.angularjs.org/1.2.0-rc.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)
    at compositeLinkFn (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)
    at compositeLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:4640:15)
    at compositeLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:4643:13)
    at publicLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:4549:30)
    at http://code.angularjs.org/1.2.0-rc.2/angular.js:1157:27 <video controls="" ng-src="http://www.thebigdot.com/{{file}}"> angular.js:7861

This informative piece delves into the issue at hand and provides guidance on how to disable the Strict Contextual Escaping feature: http://docs.angularjs.org/api/ng.$sce

Answer 5

Answer №3

This is a directive that I created

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);
    }
  }
});

Below is how to use this directive in the template

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

Answer 6

This is a directive that I created

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);
    }
  }
});

Below is how to use this directive in the template

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

Answer 7

Answer №4

Before stumbling upon the previous post, I managed to pull off a simple hack that might be helpful for someone else.

Here's the HTML snippet:

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

And here's the code from Controller.js:

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

Answer 8

Before stumbling upon the previous post, I managed to pull off a simple hack that might be helpful for someone else.

Here's the HTML snippet:

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

And here's the code from Controller.js:

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

Answer 9

Answer №5

Switching from version 1.5.0 of angular to version 1.4.8 resolved the issue I was experiencing.

.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>

Answer 10

Switching from version 1.5.0 of angular to version 1.4.8 resolved the issue I was experiencing.

.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>

Troubleshooting dynamic ng-src not functioning properly with Angular JS version 1.2.0-rc.2

Answer №1

HTML

JavaScript

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Retrieving the dimensions of an iframe using JavaScript

Issue: The value of an object is not defined (evaluating '$scope.inputcode.password')

Using the Selenium webdriver to reach the bottom of the page by scrolling vertically

Convert the entirety of this function into jQuery

Minimize duplication of HTML code by refraining from PHP usage

Finding the latitude and longitude coordinates of a point at a specific distance from another using Node.js or JavaScript

Discover the method for creating internal links on a single page with AngularJS

The Art of Div Switching: Unveiling the Strategies

An issue arises when attempting to utilize v-model with a file input

Transmit control statuses to the framework

Is there a way to display two words side by side in React components?

Tips for creating a basic 2D grid using PaperJS without interactive features

Display an alert when no matches are found in autocomplete suggestions

Injecting controllers and classes dynamically using AngularJS

tips for dealing with login pop-ups using Python's Selenium

Error: Attempting to assign a value to the 'fillStyle' property of a null object in HTML5 Javascript

Exploring the outer scope within JavaScript

Adding an item to an object array in MongoDB can be achieved with the use of either the addToSet or push operators

AngularJS's $http.get function has the ability to read text files, but it struggles with reading JSON

Tips for making a dropdown menu within an Ionic Side menu