在AngularJS中刷新iframe内容

Question

我正在编写一个应用程序,它是Anugular和part jQuery的一部分.我通过在iFrame中加载jQuery内容来分离它们.

在某个事件(例如,点击ng)时,我需要刷新iFrame.我的控制器包含以下代码:

$scope.resfeshIframe = function() { //refresh the iFrame with id "anIframe" };

而iFrame是:

<iframe id="anIframe" src="myUrl"></iframe>

有人可以帮助我.如果需要,我可以发布更多代码.

Answer 1

正如Paulo Scardine所说,正确的方法是通过一个指令,因为你不应该使用控制器来操纵DOM.

像这样的东西可以做:

.directive('refreshable', [function () {
    return {
        restrict: 'A',
        scope: {
            refresh: "=refreshable"
        },
        link: function (scope, element, attr) {
            var refreshMe = function () {
                element.attr('src', element.attr('src'));
            };

            scope.$watch('refresh', function (newVal, oldVal) {
                if (scope.refresh) {
                    scope.refresh = false;
                    refreshMe();
                }
            });
        }
    };
}])

然后可以使用它,如:

<iframe refreshable="tab.refresh"></iframe>

而且:

$scope.refreshIframe = function(){
    $scope.tab.refresh = true;
}

Answer 2

另一个hack-ish解决方案:如果你不想创建一个指令但想要坚持不操纵控制器中的DOM的好习惯.将url保留在数组中并使用ng-repeat来呈现iFrame:View:

<iframe ng-repeat="url in vm.url" ng-src="{{url}}" />

控制器:

vm.url = ['http://google.com'];

因此,每次设置vm.url的值时,angular将重新渲染iFrame.