Function inside the AngularJS Controller

JavascriptAngularjs

Javascript Problem Overview


I have code snippet in which there is a Angular Modular Controller, but there is a function inside the same controller and with a call, which is raising doubt in my mind that is this way of coding allowed in Javascript or Angular? If Yes then how does it read it? See the below code format I have:

obj.controller('CartController',function($scope){

  $scope.totalCart = function(){
	var total = 10;    	
	return total;
  }
  function calculate(){
	...Some Logic..
  }

  $scope.$watch($scope.totalCart, calculate);
)};

Please help me to understand that is this type of function definition and call within a controller allowed in Angular/Javascript?

Javascript Solutions


Solution 1 - Javascript

The calculate() is a private function -- it is only accessible in the scope of CartController. If you do not need to make use of your function in the view it is good idea to make it private. It says that it is not intended to be used in the view, so if someone else will be working with this code should think twice before use it in the view. Moreover: from within calculate you have access to all objects that are accessible in the scope of the CartController (including objects passed to CartController as parameters).

Function declared in this way is a proper JS function, which means you can get reference to it by its name. Sometimes it is thought to be more readable if you declare / create your function in advance and only then assign them to properties of some other object (in this case $scope):

function someFn (...) { ... }

function someOtherFn (...) { ... }

...

$scope.someFn = someFn

In the above snippet the intentions are very clear: make someFn accessible, while keep someOtherFn private.

Btw. declaring functions like: function nameFn(...){...} is called function statement; you can very similarly do it like: var nameFn = function(...) {...} (so called function expression). There is a slight difference between those -- basically it is illegal:

 someFn();
 var someFn = function(...) {...}

whereas, this works:

 someFn();
 function someFn(...) {...}

Sometimes you are forced to use this pattern, look e.g. at my answer to this question.

Solution 2 - Javascript

$scope.launch = function (which) {

};
var _func = function () {...}

Solution 3 - Javascript

The definition is allowed, it has the same affect as

$scope.$watch($scope.totalCart, function(){..some logic...})

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPadysterView Question on Stackoverflow
Solution 1 - Javascriptartur grzesiakView Answer on Stackoverflow
Solution 2 - JavascriptPh BhumiView Answer on Stackoverflow
Solution 3 - JavascriptgeeView Answer on Stackoverflow