Question

我在一个页面上有一个简单的youtube指令，工作正常。但是，如果我转到第2页然后再回来，播放器就不再出现了。我在这里遗漏了什么，或者我只是误解了指令的工作原理???

指令

app.directive('youtube', function($window) {
  return {
    restrict: "E",

    template: '<div></div>',

    link: function(scope, element, attrs) {
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;

      $window.onYouTubeIframeAPIReady = function() {
        player = new YT.Player(element.children()[0], {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE'
        });
      };
    },  
  }
});

控制器和应用程序路径

app.config(['$locationProvider', '$routeProvider', 

function($locationProvider, $routeProvider) {

  $routeProvider.when('/view1', {
    templateUrl: 'page1.html',
    controller: 'firstCtrl'
  });

  $routeProvider.when('/view2', {
    templateUrl: 'page2.html',
    controller: 'secondCtrl'
  });
      $routeProvider.otherwise({redirectTo: '/view2'});
    }])

app.controller('mainCtrl', function($scope) {
  $scope.title = "Main Page"
})

app.controller('firstCtrl', function($scope) {
  $scope.title = "Page 1"
})

app.controller('secondCtrl', function($scope) {
  $scope.title = "Page 2"
})

谢谢！

Answer 1

每次实例化youtube指令时，都会将youtube脚本注入页面，然后根据onYouTubeIframeAPIReady事件实例化播放器。

这意味着第二次实例化指令时，onYouTubeIframeAPIReady永远不会触发（因为API从第一次开始就已存在。）

避免这种情况的一种方法是让youtube指令的链接函数检查是否已经注入了youtube API，如果是这样，则重复使用它：

  if (window.YT) {
    player = new YT.Player(element.children()[0], {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE'
    });     
  } else {
    // your existing code here
  }

https://plnkr.co/edit/2gjSd7np8uKVi4YmreiU

（或者，您可以将youtube API直接嵌入index.html中作为普通<script>标记，而不是通过javascript作为指令的一部分注入，因此它可以用于任何需要的指令用它）。

为什么指令在页面更改后不起作用？角

1 个答案: