current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 2 down vote favorite

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>
share|improve this question
    
maybe you just included the .JS twice in your HTML-Source by accident? – Ole Albers Jun 1 at 8: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? – SeriousJelly Jun 1 at 8: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 - stackoverflow.com/questions/15535336/… – Paul Fitzgerald Jun 1 at 8:47
1  
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. – SeriousJelly Jun 1 at 8:52
1  
Could you add a plunkr so we can see your templates plus your routing in action? – Mike Jun 1 at 8:52

3 Answers 3

up vote 4 down vote accepted

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.

share|improve this answer
up vote 2 down vote

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.

share|improve this answer
    
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. – SeriousJelly Jun 1 at 8: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. – Kamo Jun 1 at 9:00
    
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). – SeriousJelly Jun 1 at 9:02
    
@SeriousJelly - sure, you should specify controller property in route config - my bad. – Kamo Jun 1 at 9: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 :( – SeriousJelly Jun 1 at 9:04
up vote 1 down vote

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">
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.