function called twice inside angularjs controller

Question

I am new to angular js and currently stuck with very wired kind of a bug. function in a controllers runs twice when its called by view loaded against a route.

http://jsfiddle.net/4gwG3/5/

you will see alert twice!!

my view is simple

and my app code is following

var IB = angular.module('IB', []);    

//channel controller
IB.controller('channelsController', function ($scope, $routeParams) {
    $scope.greet = function () {
        alert('hi');
    };
});


IB.config(function ($routeProvider) {
    $routeProvider
    .when('/channels', {
        controller: 'channelsController',
        template: '{{greet()}}'
    })

    .otherwise({ redirectTo: '/channels' });

});

need to read up on digest cycles... they can be called numerous times. Would help to explain what you want to acheive — charlietfl
– charlietfl, Commented Oct 26, 2013 at 17:06

Jorge Casariego · Accepted Answer · 2015-02-26 15:35:24Z

First check that you're not initializing your Angular app twice (by having it initialized automatically with ng-app).

One time I had 2 html pages with ng-app (one for login.html and another for main.html) and this was a problem I realized later.

Second and for me the most important, check if you have attached your controller to multiple elements. This is a common case if you are using routing.

In my case I was navigating to DashboardController like so:

app.config(function($routeProvider){
    $routeProvider
    .when('/', {
        controller: 'DashboardController',
        templateUrl: 'pages/dashboard.html'
    })
});

But I also had this in dashboard.html:

<section class="content" ng-controller="DashboardController">

Which was instructing AngularJS to digest my controller twice.

To solve it you have two ways:

removing ng-controller from your html file like this:

<section class="content">

or removing controller from routing (that is normally situated in app.js):

app.config(function($routeProvider){
$routeProvider
        .when('/', {
            templateUrl: 'pages/dashboard.html'
        })
    });

Chandermani · Accepted Answer · 2013-10-26 17:02:35Z

3

I think by creating an interpolation {{greet()}}, you create a watch on function greet. This function can get call as many time as digest cycle runs, so it is not a question about it running 1 or 2 times. So you should not depend upon the times the function is called.

answered Oct 26, 2013 at 17:02

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

4 Comments

Najam Awan Over a year ago

so can you please let me know how can a view call a function inside its controller. and when can controller call a function once view is loaded?

Chandermani Over a year ago

You are already calling a function of controller inside view, and it is perfectly fine to do this. The only thing I am saying is you cannot depend upon how may times that function gets invoked. I did not understand your second part. I highly recommend you see the developer guide docs.angularjs.org/guide/concepts

Najam Awan Over a year ago

I want view to request a function that is defined in controller just once? second way would be controller to know that view is loaded so he can call some functions that make expensive calls like loading a web player with live stream.

Vijay Pande Over a year ago

@njam you need not wait for wait to load for view. You should move expensive call to the service method and use Promise api (docs.angularjs.org/api/ng.$q) to wait for service response.

Vijay Pande · Accepted Answer · 2013-10-26 17:32:49Z

0

I dont know what you are trying to achieve here. There are two alerts 1. When the controller is called. 2. When the template is get evaluated.

template is to provide the view part, however, in this case template is just evaluating function which is not creating any view.

answered Oct 26, 2013 at 17:32

Vijay Pande

2742 silver badges8 bronze badges

Comments

lmt · Accepted Answer · 2013-12-07 16:44:33Z

-1

I had the same problem, so I did:

$scope.init=function()
{
    if ($rootScope.shopInit==true) return;
    $rootScope.shopInit=true;
    ...
}
$scope.init();

Like if it were a singleton ! (I had many ajax calls each time I display, it was boring)

edited Dec 7, 2013 at 16:44

lmt

8111 gold badge11 silver badges27 bronze badges

answered Dec 7, 2013 at 16:20

Fabi Fabi

212 bronze badges

1 Comment

Victor Over a year ago

nice workaround, it really hides the problem instaed of resolving... but better than nothihg... don't now why you get downvoted....

Collectives™ on Stack Overflow

function called twice inside angularjs controller

4 Answers 4

Comments

4 Comments

Comments

1 Comment

Your Answer

Linked

Collectives™ on Stack Overflow

function called twice inside angularjs controller

4 Answers 4

Comments

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related