Ng-click第一次不起作用，但之后才起作用。

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当前设置为空，因为除非我单击了将传入url的书签按钮，否则我将永远不会导航到此视图。

<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; 
    };
});