How should you define regular functions in AngularJS

Question

I have some experience in AngularJS, but the fact that I can't figure out how to handle a regular function inside a AngularJS controller keeps bothering me. For the record I am talking about a function that handles parts of small business logic inside the controller, that doesn't need to be shared across controllers. I have found two ways to handle such regular functions that don't need binding from the view.

The first way I have found is to just use: $scope.myFunction = function(){} but the fact that it can be used directly from the view doesn't seem correct.

The second way I have found is to just use a regular Javascript function: function myFunction(){} but I don't know how the visibility of such functions is in AngularJS.

Is there a "correct" way of ensuring a limited visibility inside a controller? Or should I keep using the regular Javascript function?

If you define it in $scope then it will be only visible within the controller of that scope, so why not do it that way? — Ahmad, May 28 '14 at 07:14
@JeetendraChauhan because it is about a function that can only be used inside that controller, and has no use wathsoever in another controller. — Stef, May 28 '14 at 07:21
@Ahmad but than it can be accessed from the view, couldn't that be a problem in some cases? — Stef, May 28 '14 at 07:22
@StefCoenen it would be, I dont see why would that be a problem now or later — Ahmad, May 28 '14 at 07:35
@Ahmed that is not correct. It will be visible to any child controllers if it is declared on `$scope`. — ivarni, May 28 '14 at 07:37

CodingIntrigue · Accepted Answer · 2014-05-28T07:33:18.700

7

Just the same way as you would define a "local" function within a standard closure:

myApp.controller("MyCtrl", ["$scope", function($scope) {
    var localFunc = function() {
        // Internal function, only available to code executed after
        // localFunc is declared
    };
    function localFuncHoisted() {
        // Internal function, doesn't matter where it is declared
        // will be visible to all internal methods
    }
    $scope.globalFunc = function() {
        // Available from the controller
    }
}]);

localFunc and localFuncHoisted are identical in most cases, however each has its own benefits. The hosted function is visible to all code, before and after declaration. localFunc can be set only when needed and removed when not.

edited May 28 '14 at 07:33

answered May 28 '14 at 07:21

CodingIntrigue

75,930
30
170
176

So the localFunc would be preferred in my use case, correct? – Stef May 28 '14 at 07:31
@StefCoenen I've added clarification for `localFunc` and `localFuncHoisted`. The two are mostly equivalent, but you might decide to use one depending on your exact case. – CodingIntrigue May 28 '14 at 07:33
Just to be sure, the only difference is that the `localFunc` is only accessible after declaration and the `LocalFuncHost` is accessible in the complete controller and only in the controller, not in other controllers? – Stef May 28 '14 at 07:37
@StefCoenen Exactly. Neither is visible outside of the Controller – CodingIntrigue May 28 '14 at 07:38

How should you define regular functions in AngularJS

1 Answers1