爲什麼指令在換頁後不工作？ Angular

我在一個頁面上有一個簡單的youtube指令，工作正常。但是，如果我進入第2頁然後回來，玩家不會再出現。我在這裏錯過了什麼，或者我只是誤解指令如何工作？爲什麼指令在換頁後不工作？ Angular

指令

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

謝謝！

來源

2017-02-10 Octtavius

使用https://github.com/brandly/angular-youtube-embed，你會沒事的。 – lin

每當youtube指令實例化，然後根據onYouTubeIframeAPIReady事件實例化播放器時，您正在向頁面中注入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

（或者，你可以嵌入YouTube的API d直接作爲index.html中的標準<script>標記，而不是通過javascript將其作爲指令的一部分注入，因此它將爲需要使用它的任何指令做好準備）。

來源

2017-02-10 15:45:45

非常感謝。這正是我需要的。 – Octtavius

歡呼聲，樂意幫忙！ –

爲什麼指令在換頁後不工作？ Angular

回答

相關問題