Почему директива не работает после смены страницы? Angular

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" 
}) 

Благодарит PLUNKER

!

Answer 1

Вы вводите скрипты youtube в страницу каждый раз, когда создается экземпляр директивы youtube, а затем в зависимости от события для создания экземпляра проигрывателя.

Это означает, что второй раз директива конкретизируется, 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

(в качестве альтернативы, вы можете вставлять использования API YouTube д прямо как обычный тег <script> в вашем index.html вместо того, чтобы вводить его через javascript как часть директивы, поэтому он будет готов для любой директивы, которая должна его использовать).