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

ionic-v1
1

Hi there,

I have two states/views called bookmark and bookmarked.
The bookmark view has a button which passes an url into a function called setURL. This function sets the src for the iframe on the bookmarked view.

<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>

The bookmarked view has an iframe whose src is set by the button on the previous view. The src is currently set to nothing because I would never navigate to this view unless I’ve clicked the bookmark button which would pass in an url.

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

When I run the app and navigate to the bookmark view and click on the bookmark button, it navigates to the bookmarked view but it displays a blank page in the iframe (src="") rather than using the url passed in from the function. However, from this blank page if I navigate to the bookmarks view and click on the bookmark button the second time, the actual url loads.

This is what the function looks like:

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

I don’t know why it does not work the first time…
Any help would be appreciated, thank you.

3

Try

<iframe src='about:blank'></iframe>
4

I am still experiencing the same issue despite trying your suggestion. When I click the bookmark button for the first time, the view loads with the empty src, rather than the url I have passed into the function.

5

I suppose that you tried this also:

6

Yes, I have also tried this. It seems that the iframe being on a different view is the problem because the methods I’ve tried and had no success with, work fine when the iframe and the “bookmark” button is on the same page.

7

Strange, maybe you could try event broadcasting to trigger the iframe update.

8

Currently you use a statically defined iframe, what if you created dynamically a new one and inserted it in DOM?

9

Do you think you could give me a small example and I can try from there? Sorry I am new to ionic/angular and just developing in genera. Thank you for your replies!

10

You could try this nice answer on stackoverflow, look at the plunkr in second answer it does create the iframe.

  $scope.player = $sce.trustAsHtml('<iframe src="http://www.w3schools.com"></iframe>');
1 Like
11

Thank you for those references, I have tried and like the previous methods, they work but fail once I put it in a function so that it can be triggered by the button on another view.

I think I may just have to put bookmark buttons and the iframe on the same page.

This works:

var link = 'https://www.w3schools.com';
$scope.bookmarkFrame1 = $sce.trustAsHtml('<iframe src='+link+'></iframe>');

This does not work:

$scope.testBookmark = function(){
    var link = 'https://www.airpair.com';
    $scope.bookmarkFrame1 = $sce.trustAsHtml('<iframe src='+link+'></iframe>');
};

For the button I just have:

<button ng-click="testBoomark()" ui-sref="myLearning.bookmarked">click me</button>

Both views share the same controller

// My Learning - bookmarks
      .state('myLearning.bookmarks',{
          url:'/bookmarks',
          views: {
              'learning-bookmarks':{
                  templateUrl: 'templates/mylearning/bookmarks.html',
                  controller: 'learningCtrl'
              }
          }
      })
      // My learning - bookmarked
      .state('myLearning.bookmarked',{
          url:'/bookmarked',
          views: {
              'learning-bookmarked':{
                  templateUrl: 'templates/mylearning/bookmarked.html',
                  controller: 'learningCtrl'
              }
          }
      })
12

I think I may have found the reason it does not work:

Controllers are disposed when changing routes. This is good behavior since you should not rely on controllers to carry data between views. It’s best to create a service to handle that data.

I will try to implement a service to carry out this process instead.

1 Like