Angular JS強制iframe重新加載

我正在製作一個應用程序，並且我在同一個頁面中有不同的視頻，我不想在同一時間運行不同的視頻，所以我希望當用戶播放另一個視頻時應該重新加載其他iframe（所以視頻自動停止）？Angular JS強制iframe重新加載

有沒有辦法用控制器的iframe進行操作，如果你可以提供一個簡單的例子或任何可以解決這個問題的東西，至少我已經在這兩天工作了。

控制器：

function MyCtrl($scope) { 
    $scope.video1 = 'https://www.youtube.com/embed/wsXWjj88vKo'; 
    $scope.video2 = 'https://www.youtube.com/embed/FVXajf9ALPM'; 
}

HTML：

<div ng-controller="MyCtrl"> 
<iframe ng-src="{{video1}}" width="400" height="300" frameborder="0" allowfullscreen></iframe> 
    <iframe ng-src="{{video2}}" width="400" height="300" frameborder="0" allowfullscreen></iframe> 
</div>

JSFIDDLE

或者有什麼辦法強迫重裝一個按鈕，例如：

$scope.reload = function() { 
    $scope.video1 = 'https://www.youtube.com/embed/wsXWjj88vKo'; 
    };

來源

2015-06-25 Stranger B.

我已經使用了自定義指令NG刷新，這會看一個變量，如果這個變量改變 – harishr

刷新頁面，你可以給我一個例子這個指令，或者如果你可以將它應用於我的示例，那將會很棒 –

例如refres h關閉

csapp.directive('csReloadOn', ['$timeout', function ($timeout) { 

var getTemplate = function() { 
    return '<div ng-if="doRefreshPageOnModeChange"><div ng-transclude=""></div></div>'; 
}; 

var linkFunction = function (scope, element, attrs) { 
    scope.doRefreshPageOnModeChange = true; 

    scope.$watch(attrs.csReloadOn, function (newVal, oldVal) { 
     if (newVal === oldVal) return; 
     scope.doRefreshPageOnModeChange = false; 
     $timeout(function() { scope.doRefreshPageOnModeChange = true; }, 100); 
    }); 
}; 

return { 
    restrict: 'AE', 
    transclude: true, 
    template: getTemplate, 
    link: linkFunction 
}; 
}]);

如何使用它

 <div cs-reload-on="someVar"> 
      ----- contents to reload ---- 
    </div>

來源

2015-06-25 14:15:59 harishr

我不明白你的例子！有沒有可能給我一個JSFiddle或Codepen的例子！我將不勝感激 –

檢查編輯，添加了如何使用 – harishr

什麼是「someVar」？謝謝 –

Angular JS強制iframe重新加載

回答

相關問題