Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

function called twice inside angularjs controller

Tags:

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' });  }); 
like image 409
najam Avatar asked Oct 26 '13 16:10

najam


2 Answers

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'         })     }); 
like image 147
Jorge Casariego Avatar answered Oct 08 '22 02:10

Jorge Casariego


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.

like image 24
Chandermani Avatar answered Oct 08 '22 02:10

Chandermani