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工作

会很有帮助

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

1 个答案: