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>

Angular JS Force iframe重新加载

1 个答案: