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

Question

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

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

嵌入 youtube 视频。

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

所以在我的控制器中，我做了类似的事情

  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}}" 我得到"localhost/myapp/{{url}}" does not exist.

我该如何解决这个问题？

Answer 1

我已更新您链接的 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恢复掉期地将有助于......