javascript - AngularJS-使用指令嵌入Youtube视频时出现问题

所以我基本上从这里复制并粘贴了代码

http://plnkr.co/edit/0N728e9SAtXg3uBvuXKF?p=preview

嵌入youtube视频。

一切正常，但是现在我试图嵌入一个YouTube视频，其中通过服务检索“YouTube视频ID”。

所以在我的 Controller 中，我做类似的事情

  APIService.getVideo($stateParams.videoId).then(function(video) {
    $scope.code = video.youtube_video_id;
  });

在我的模板中

<div my-youtube code="code"></div>

但这是行不通的。

基本上，在指令中

app.directive('myYoutube', function($sce) {
  return {
    restrict: 'EA',
    scope: { code:'=' },
    replace: true,
    template: '<div style="height:400px;"><iframe style="overflow:hidden;height:100%;width:100%" width="100%" height="100%" src="{{url}}" frameborder="0" allowfullscreen></iframe></div>',
    link: function (scope) {
      scope.$watch('code', function (newVal) {
        if (newVal) {
          scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + newVal);
        }
      });
    }
  };
});

我有src="{{url}}"的地方

我该如何解决？

最佳答案

我已经更新了您链接的plnkr，其中包括从服务获取代码。 http://plnkr.co/edit/BggETGi7zAWL5bdHd0hO?p=preview

这是我的服务，基本上可以模拟服务器对代码的调用

app.factory('myFactory', function($q) {
  return {
    getCode: function() {
      var def = $q.defer();
      setTimeout(function() {
        def.resolve('oHg5SJYRHA0');
      }, 2000);
      return def.promise;
    }
  }
});

希望这可以帮助!
否则，坏掉plnkr可以解决问题。