Question

我有两个状态/视图，称为书签和书签。书签视图有一个按钮，它将url传递给名为setURL的函数。此函数在书签视图上设置iframe的src。

<ion-view view-title="Bookmarks">
    <ion-content>
        <button class="button" ui-sref="myLearning.bookmarked" ng-click="setURL('SOMEURL')">Bookmark</button>
    </ion-content>
    <div class="bar bar-footer bar-assertive"></div>
</ion-view>

带书签的视图有一个iframe，其src由前一个视图上的按钮设置。 src当前设置为空，因为除非我点击了会传入网址的书签按钮，否则我永远不会导航到此视图。

<ion-view view-title="Bookmarked">
    <ion-content>
        <iframe id="learningFrame" src="" width="100%" height="100%" seamless></iframe>
    </ion-content>
</ion-view>

当我运行应用程序并导航到书签视图并单击书签按钮时，它会导航到已添加书签的视图，但它会在iframe（src =“”）中显示一个空白页面，而不是使用从中传入的URL功能。但是，如果我导航到书签视图并第二次单击书签按钮，则从此空白页面加载实际URL。

为什么视图在首次加载时不使用我通过setURL传入的url？

这就是函数的样子：

.controller('bookmarkCtrl', function($scope){
    $scope.setURL = function(currURL){
        document.getElementById('learningFrame').src = currURL;
    };
});

我不知道为什么它第一次不起作用...... 任何帮助将不胜感激，谢谢。

Answer 1

您可以简单地使用ng-src来{{}}决定src属性值，而不是从控制器进行DOM操作。

<强>标记

<ion-view view-title="Bookmarked">
    <ion-content>
        <iframe id="learningFrame" ng-src="{{learningFrameUrl}}" width="100%" height="100%" seamless></iframe>
    </ion-content>
</ion-view>

<强>控制器

.controller('bookmarkCtrl', function($scope){
    $scope.setURL = function(currURL){
        $scope.learningFrameUrl = currURL;
    };
});

<强>更新

由于您希望在控制器之间共享数据，因此您可以使用服务/工厂组件。然后，您可以通过将其注入您希望使用它的控制器/指令中来使用该服务。

<强>服务

app.service('dataService', function(){
   this.learningFrame = {
      Url: ''
   };
   //..other stuff here..//
});

<强>控制器

.controller('bookmarkCtrl', function($scope, dataService){
    $scope.setURL = function(currURL){
        //this can be available in other controller
        //wherever you take value from learningFrameUrl
        $scope.learningFrame = dataService.learningFrame;
        dataService.learningFrame.Url = currURL; 
    };
});

Ng-click第一次不起作用 - 但之后会起作用

1 个答案: