문제

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">     
도움이 되었습니까?

해결책

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

다른 팁

You must enter $Sec in your controller:

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

$sce
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top