ページ変更後にディレクティブが機能しないのはなぜですか？ Angular

Question

私は簡単なyoutubeディレクティブを1ページに持ち、うまくいきます。しかし、2ページ目に戻って戻ってくると、プレイヤーはそれ以上表示されません。 私はここで何かを見逃しているのですか、あるいは単に指示がどのように働くかを誤解していますか？ここで

PLUNKER

指令

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指示がインスタンス化されるたびに、そしてonYouTubeIframeAPIReadyイベントに応じて、プレイヤーをインスタンス化するたびにYouTubeスクリプトをページに挿入しています。

これはディレクティブがインスタンス化された二回目は、これを回避するonYouTubeIframeAPIReady（APIが初めての場所にすでにあったので。）発火決して

一つの方法は、youtubeディレクティブのリンク機能のチェックを持つことであることを意味しあなたはユーチューブのAPI dを埋め込むことができ、また

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

（：ユーチューブのAPIがすでに注入されたかどうか、もしそうなら、それを再利用しますディレクティブの一部としてjavascriptを使用するのではなく、index.htmlに通常の<script>というタグを直接使用する必要があります。