Angular JS强制iframe重新加载

Question

我正在制作一个应用程序，我在同一页面中有不同的视频，我不想同时运行不同的视频，所以我希望当用户播放另一个视频时我应该重新加载其他 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';
    };  

Answer 1

刷新指令示例

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>