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


#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>');

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