Controller being called twice in Ionic (AngularJS)

Question

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>

maybe you just included the .JS twice in your HTML-Source by accident? — Ole Albers, Jun 01 '15 at 08:45
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, Jun 01 '15 at 08:47
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 - http://stackoverflow.com/questions/15535336/combating-angularjs-executing-controller-twice — Paul Fitzgerald, Jun 01 '15 at 08:47
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, Jun 01 '15 at 08:52
Could you add a plunkr so we can see your templates plus your routing in action? — mahulst, Jun 01 '15 at 08:52
I am on my phone at moment so a bit harder to check but can you try remove ```ng-app="App"``` from `````` — Paul Fitzgerald, Jun 01 '15 at 08:56
@PaulFitzgerald I tried removing that but the whole app fails, doesn't actually load anything, probably cause the app isn't declared. — ChrisBratherton, Jun 01 '15 at 08:59
Sorry, updated the question title, this is a Ionic project if that makes any difference. — ChrisBratherton, Jun 01 '15 at 09:07

score 8 · Answer 1 · answered Jun 01 '15 at 08:56

8

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.

answered Jun 01 '15 at 08:56

kamil-mrzyglod

4,948
1
20
29

As you can see in my routes example above I am only calling it once in the dashboard view. I removed it from the route to try it out, it seems that no matter how I call it, its run twice. – ChrisBratherton Jun 01 '15 at 08:58
@SeriousJelly - I meant removing `ng-controller="DashboardController"` from dashboard.html - when you access your dashboard route, controller is called twice because it is in HTML template and is automatically generated by `ui-router`. – kamil-mrzyglod Jun 01 '15 at 09:00
1

Ok, tried that now nothing loads, surely the ui-router doesn't know what Controller I want to use in that template unless I specify it in the route itself or the view (not both). – ChrisBratherton Jun 01 '15 at 09:02
@SeriousJelly - sure, you should specify `controller` property in route config - my bad. – kamil-mrzyglod Jun 01 '15 at 09:02
Yea, tried that previously, I have removed the ng-controller from the dashboard view, and added it back to the route, still the same issue though :( – ChrisBratherton Jun 01 '15 at 09:04
@SeriousJelly - so I guess Plunkr to repro this problem would be helpful. – kamil-mrzyglod Jun 01 '15 at 09:07
@SeriousJelly how did you solve that issue? as I am facing same issue as you faced, can you please help me on this? – Khawaja Asim Mar 15 '17 at 05:50

score 5 · Accepted Answer · answered Jun 01 '15 at 13:25

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.

Leon Gaban · Answer 3 · 2015-12-14T08:23:58.320

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

Controller being called twice in Ionic (AngularJS)

3 Answers3

Linked