Domanda

I'm using angular to display an iframe of Youtube. In order to, I've used $sce to trust external URL but I've got an error that I can't solve... Maybe someone could explain it to me

Controller.js

.controller('DetailsCtrl', ['$scope', '$routeParams', '$http',
    function($scope, $routeParams, $http, $sce) {
        $scope.loading = true;
      $scope.url = $sce.trustAsResourceUrl('//www.youtube.com/embed/4wOoLLDXbDY');
        $http.get('projects/' + $routeParams.projectId + '.json').success(function(data) {
          $scope.project = data;
          $scope.loading = false;
        });
    }]);

Details.html

<iframe width="560" height="315" ng-src"{{url}}" frameborder="0" allowfullscreen></iframe>

Error in Console

TypeError: Cannot call method 'trustAsResourceUrl' of undefined
    at new <anonymous> (http://localhost:9000/scripts/controllers/details.js:22:25)
    at invoke (http://localhost:9000/bower_components/angular/angular.js:3869:17)
    at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:3880:23)
    at http://localhost:9000/bower_components/angular/angular.js:7134:28
    at link (http://localhost:9000/bower_components/angular-route/angular-route.js:913:26)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:6579:13)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:5986:15)
    at publicLinkFn (http://localhost:9000/bower_components/angular/angular.js:5891:30)
    at boundTranscludeFn (http://localhost:9000/bower_components/angular/angular.js:6005:21)
    at controllersBoundTransclude (http://localhost:9000/bower_components/angular/angular.js:6600:18) <div ng-view="" class="ng-scope">     
È stato utile?

Soluzione

Try this. You need to specify $sce as a dependency.

.controller('DetailsCtrl', ['$scope', '$routeParams', '$http', '$sce',
    function($scope, $routeParams, $http, $sce) {
        $scope.loading = true;
      $scope.url = $sce.trustAsResourceUrl('//www.youtube.com/embed/4wOoLLDXbDY');
        $http.get('projects/' + $routeParams.projectId + '.json').success(function(data) {
          $scope.project = data;
          $scope.loading = false;
        });
    }]);

Altri suggerimenti

You must enter $Sec in your controller:

.controller('DetailsCtrl', ['$scope', '$routeParams', '$http', '$sce',
    function($scope, $routeParams, $http, $sce)

$sce
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top