cordova ionic app seems to load controller twice

Question

I'm having some issues with an app I'm creating in Cordova (5.3.3) using ionic (1.6.5) and angular js and building for iOS and Android.

I have a menu item that when I click should load the next state with other menu items. However it seems like it loads the next state once without the animation, then loads the state again with the animation resulting in a "jerky" effect. It's best shown in a video I have uploaded here: https://www.youtube.com/watch?v=YCEQeqFyNl4&feature=youtu.be

I was wondering if anybody has an idea of what could be the issue here and where I should start looking, or if there are known bugs about this?

Any help would be appreciated!

// the controller
.controller('ProgramCtrl', ['$scope', 'FacProgram',
  function($scope, FacProgram) {


    $scope.refresh = function() {
      FacProgram.refresh()
        .finally(function() {
          $scope.$broadcast('scroll.refreshComplete');
        });
    };

    $scope.temp_articles = function() {
      return FacProgram.all();
    };

  }
])

.controller('ProgramDetailCtrl', ['$scope', '$stateParams', 'FacProgram',
  function($scope, $stateParams, FacProgram) {
    $scope.art = FacProgram.get($stateParams.programId);

  }
])


// The factory in a different js file:

.factory('FacProgram', ['$http', '$q', 'FacJson',
function($http, $q, FacJson) {

  var temp_articles = [];


  function findHeader(src, headTag, index) {
    var head = $(src).find(headTag).get(0);
    temp_articles[index].headlinethumb = head.textContent;
    temp_articles[index].headline = head.textContent;
  }


  function refresh() {
    var q = $q.defer();

    ... // A fucntion that get's URL's from .json file
    ////////////////////////////////////////////////////////////
    angular.forEach(urls, function(URL, index) {
      //add the articles to the dictionary
      temp_articles.push({
        inx: index,
        img: img_logos[index]
      });
      $http.get(URL)
        .then(function(sc) {
            // The will parse the html looking for thumbnail text, main body text etc
            var src = sc.data.substring(sc.data.indexOf('<html>'));

            ... // code that parses website for content etc
            ////////////////////////////////////////////////////////
            q.resolve();
          },
          function() {
            q.reject();
          });
    });
  });

return q.promise
}


return {
all: function() {
  return temp_articles;
},
get: function(programId) {
  return temp_articles[programId];
},
refresh: function() {
  console.log('DPG programs refresh triggered');
  temp_articles = []; // a catch to prevent duplicates and to allow other templates to use without
  //contamination
  return refresh()
}
}
}]);

<!-- the start state for progams of the DPG -->
<ion-view>
  <ion-content>
    <div class="list">
      <a class="item item-thumbnail-left item-icon-right item-text-wrap" ng-repeat="art in temp_articles()" href="#/program/{{$index}}">
        <img ng-src="{{art.img}}">

        <h2 class="padding-top" style="font-weight: 300;">{{art.headlinethumb}}</h2>
        <i class="icon ion-chevron-right" style="font-size: 18px"></i>
      </a>
    </div>

  </ion-content>
</ion-view>



<!-- the datailed view of the application -->
<ion-view>
  <ion-content>



    <div style="text-align: left; padding-top: 30px; padding-left: 20px; padding-right: 20px">
      <h2 style="font-weight: 500; font-size: 17px">{{art.headline}}</h2>
    </div>
    <!--<p style="padding-left: 10px; font-size: 13px; font-weight: 300">Datum</p>-->

    <div style="text-align: center">
      <img style="max-height: 300px; max-width: 300px; width: auto;" ng-src="{{art.img}}">

    </div>
    <div class="padding" style="font-weight: 300">
      <div ng-bind-html="art.text | hrefToJS"></div>
    </div>

  </ion-content>
</ion-view>

I've seen this link btw: http://stackoverflow.com/questions/30569122/controller-being-called-twice-in-ionic-angularjs but to me it doesn't look like the solution to my problem — jwsmithers, Oct 09 '15 at 15:24

score 0 · Answer 1 · answered Oct 09 '15 at 21:23

the same happened to me if you put your controller in app.js try removing it from there and only applying it in controller or viceversa.

your state in app.js should look like this:

 .state('state-name', {
    url: '/state-name',
    templateUrl: "templates/walkthrough/state-name.html"
    //Notice no controller here
  })

cordova ionic app seems to load controller twice

1 Answers1