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重新加载

回答

相关问题