Controller being called twice in Ionic (AngularJS)

4
votes

In my angular project the user accepts a EULA then get automatically redirected to their dashboard, however, on this redirect the DashboardController seems to be being called twice, the DashboardController is being called on the route itself, I have checked to see if I have accidently called it again in the template but I havn't. Below is my route & controller. It doesn't appear to matter if I access the URL directly or via the redirect on the EULA controller, I get the same result.

The routes

.config(function($httpProvider, $stateProvider, $urlRouterProvider) {

    $httpProvider.interceptors.push('httpRequestInterceptor');

    $urlRouterProvider.otherwise('/');

    $stateProvider

    .state('login', {
        url: '/',
        templateUrl: 'templates/login.html',
        data: {
            requireLogin: false
        }
    })
    .state('eula', {
        url: '/eula',
        templateUrl: 'templates/eula.html',
        data: {
            requireLogin: true
        }
    })
    .state('dashboard', {
        url: '/groups',
        templateUrl: 'templates/dashboard.html',
        data: {
            requireLogin: true
        }
    })
});

The controller:

App.controller('DashboardController', ['$scope', 'RequestService', '$state', '$rootScope', function($scope, RequestService, $state, $rootScope){

alert('test');

}]);

Any ideas?

ADDED MY HTML AS PER COMMENTS

index.html

<body ng-app="App">

<ion-nav-bar class="bar-positive nav-title-slide-ios7" align-title="center">
        <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view class="slide-left-right"></ion-nav-view>
    <ui-view></ui-view>
</body>

dashboard.html

<div class="groups" ng-controller="DashboardController">
    <ion-view title="App">

        <ion-nav-buttons side="right">
            <a ui-sref="groupcreate"><span class="icon ion-ios-plus-outline"></span></a>
        </ion-nav-buttons>

        <ion-content class="padding">
            <div class="row">
                <div class="col-50"  ng-repeat="group in groups">
                    {{ group }} 1
                </div>
            </div>
        </ion-content>
    </ion-view>
</div>
3
javascriptangularjsionic-frameworkangularjs-routingangularjs-controller
maybe you just included the .JS twice in your HTML-Source by accident? - Ole Albers
Thanks, but I have checked this and it doesn't seem to be the case, I am also using other controllers for example a LoginController but this is only being called once, I'm not 100% but could it be something to do with the routing? - ChrisBratherton
there can be numerous reasons for this. It happened to me last week and it was because I was using ionic and the controller was attached to the dom. It was also getting triggered in the routing. If you provide your html too this may be the reason. see this post for a list of possible solutions - stackoverflow.com/questions/15535336/… - Paul Fitzgerald
Thanks @Paul Fitzgerald, I have included my HTML in the question. As you can see, I am no longer calling the DashboardController in the routes, but I am in the dashboard.html file. - ChrisBratherton
Could you add a plunkr so we can see your templates plus your routing in action? - mahulst

3 Answers

8
votes

If you are using ui-router you don't have to use ng-controller. You have used it in your dashboard.html, another is generated by ui-router - that's why it is hit twice.

5
votes

Ok so after a long time debugging and check stuff out, I found out that it was an issue relating to the Nav Bar in ionic, essentially, I was calling <ui-view></ui-view> & <ion-nav-view></ion-nav-view> on the same page, so basically doubling up on my views which in turn was calling the controller twice.

1
votes

I know this has been answered already as well, but I wanted to add my fix for the exact same problem.

My controllers were also being called twice, but in my case I had to comment out the ng-controller settings in various files:

My config function in the main app.js

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('splash', {
            url: "/",
            templateUrl: "app/splash/splash.html"
            // controller: 'SplashCtrl'
        })

Since I was already calling it in the markup:

<ion-view view-title="TickerTags" ng-controller="SplashCtrl as splash">
    <ion-content class="splash">

The controller key inside of my Directives

angular
    .module('tagsPanelDirective', [])
    .controller('TagsPanelCtrl', TagsPanelCtrl)
    .directive('tagsPanel', tagsPanel);

function tagsPanel() {
    var directive = {
        templateUrl: "app/tags/tagsPanel.html",
        restrict: "E",
        replace: true,
        bindToController: true,
        // controller: 'TagsPanelCtrl as tagsPanel',
        link: link,
        scope: false
    };
    return directive;
    function link(scope, element, attrs) {}
}

Again since I was already calling it from within the template markup:

<section class="tags-panel" ng-controller="TagsPanelCtrl as tagsPanel">