Controller function getting called twice while using as Interpolation

Question

I have a very simple app where I'm trying to call my controller's function like below

 var app=angular.module('test',[])
 app.controller('ctrl',function($scope){
 $scope.func=function(){
    alert('hi')
  }
})

This is how I'm calling it

  <body ng-app='test' >
    <h1 ng-controller='ctrl'>{{func()}}</h1>

  </body>

The problem which I'm facing is my function is getting called twice.

Read many posts on SO where the reason behind this issue is mostly related to your app configuration or route configuration where by mistake if you have configured same controller for different view or if your app is getting initialized twice then you will face this issue.

But in my case I don't have any such cases but still I'm facing this issue.

This function will return something in future which I need to show in a table's column...It needs to be called on its own.Can't use ng-click here.Also don't want any workaround...would like to know the reason behind this. — Rishi Tiwari
– Rishi Tiwari, Commented Jun 28, 2016 at 4:48

Rayon · Accepted Answer · 2016-06-28 05:12:01Z

3

Using {{func()}}, you are creating watch on the function func, every time digest cycle runs, func will be invoked.

A demo to demonstrate:

var app = angular.module('test', [])
app.controller('ctrl', function($scope) {
  $scope.val = 100;
  $scope.func = function() {
    alert($scope.val)
  };
  $scope.add = function(a) {
    return ++$scope.val;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>

<body ng-app='test'>
  <h1 ng-controller='ctrl'>
    {{func()}}
    {{add()}}
  </h1> 
</body>

Fiddle demo to play with

edited Jun 28, 2016 at 5:12

answered Jun 28, 2016 at 4:53

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rayon Over a year ago

@RishiTiwari, It is like applying watch over $scope.val

Rishi Tiwari Over a year ago

I don't have any $scope.val..I just have a func() on $scope...In your example you are changing the value of "val" everytime that is why the digest cycle is getting executed multiple times and that too only for 10 times also you will get exception in as it has created an infine loop...

Rayon Over a year ago

@RishiTiwari, Dude the demo is to demonstrate.. Digest cycle has many things to re-run it.. I have explained you only one..Exceptions is quiet obvious..That is why I have highlighted it..

Rishi Tiwari Over a year ago

When your digest cycle runs it actually runs your wacthes...so in this case if the function is getting called twice just because of the digest cycle my watch on that function should also get called twice.

Rayon Over a year ago

@RishiTiwari, There are many watchers in angular directives which are hidden from you.. They are making the difference here...

Nailbite · Accepted Answer · 2016-06-28 04:53:19Z

0

What is the purpose of func()?

Would it be possible to bind a variable instead of calling the function directly?

var app=angular.module('test',[])
 app.controller('ctrl',function($scope) {
   function func() { // called in the future
     $scope.funcValue = 'My Title';
   }
})

HTML:

<body ng-app='test' >
    <h1 ng-controller='ctrl'>{{ funcValue }}</h1>
</body>

answered Jun 28, 2016 at 4:53

Nailbite

2011 gold badge2 silver badges5 bronze badges

Collectives™ on Stack Overflow

Controller function getting called twice while using as Interpolation

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related