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

Question

我有两个states/views叫bookmark和bookmarked。书签视图有一个按钮，它将 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 而不是从控制器进行 DOM 操作，这将使 {{}} 决定 src 属性值。

标记

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

更新

如果您想在控制器之间共享数据，那么您可以使用 service/factory 组件。然后你可以通过将它注入你的 controller/directive 任何你想使用它的地方来使用它。

服务

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 第一次不起作用 - 但之后起作用

Ng-click does not work first time - but works afterwards

angularjs

angularjs-scope

angularjs-controller

ionic-framework

ionic