AngularJS : Is it necessary to bind all my controller methods to $scope

Question

When do we need to bind an method to $scope in controller,i am dealing with methods which is just mapping operation on object.

Example :
$scope.myVar = {};

     function myMyObject(x) {
          $scope.myVar = {
                  "xKey":x
           }

     }

    to 

    $scope.myMyObject = function(x) {
          $scope.myVar = {
                  "xKey":x
           }

     }

    myMyObject(10);
    $scope.myMyObject(10);

Is it necessary to bind $scope to myMyObject method here ?

no. you need to use $scope only for the methods called or need to be called from view. — Ved, Oct 28 '15 at 11:04
No, its not nessesery. You can bind to `this` and use `controllerAs` syntax in the view - https://docs.angularjs.org/api/ng/directive/ngController#example — Krzysztof Safjanowski, Oct 28 '15 at 11:15

Omri Aharon · Accepted Answer · 2015-10-28T11:17:43.933

1

Bind methods to $scope only when they will need to be called from the View. If they are just private methods that you only call from the controller itself, there's no need to pollute the scope.

In your specific scenario, there is no need to bind myMyoObject() to the scope.

Edit: You can avoid using $scope altogether and use controllerAs syntax, in which case instead of binding to $scope, you bind to this. The non-public functions still will be kept unbound to anything.

edited Oct 28 '15 at 11:17

answered Oct 28 '15 at 11:04

Omri Aharon

16,959
5
40
58

2

You can add methods and variables to `this` and that will be visible in views too. – Niezborala Oct 28 '15 at 11:06
1

@Niezbor True if you want to use `controllerAs` syntax. – Omri Aharon Oct 28 '15 at 11:07
@Omri Aharon : if the same method i want to access in directive do i need to bind it to scope right ? – jsduniya Oct 28 '15 at 11:10
1

@SidBhalke Yes, because for the directive to know about it you need it to be exposed via the scope, or controllerAs syntax. – Omri Aharon Oct 28 '15 at 11:15

score 1 · Answer 2 · answered Oct 28 '15 at 11:07

1

Only methods defined on $scope object are accessible from the HTML/view. Example from ng-click, filters, etc. -If your method is not required to be accessed from html , then there is no need to bind it to $scope.

answered Oct 28 '15 at 11:07

Disha

822
1
10
39

how about directives ? – jsduniya Oct 28 '15 at 11:07
@SidBhalke Directives are always visible because of the name. – Niezborala Oct 28 '15 at 11:10
@456: how to about accessing scope methods from controller to directive ? – jsduniya Oct 28 '15 at 11:13
using isolated scope and '&' parameter, you can access the controller method in directive – Disha Oct 28 '15 at 11:15

score 1 · Answer 3 · answered Oct 28 '15 at 11:46

As a good practice, you can declare all your functions in your controller and then bind to the $scope only the functions you need.

Example:

function _myHelperFunction(param) {
    //do some stuff
}

function myFunction(otherParam) {
    //do some stuff or use the _myHelperFunction
}

function myFunction2(otherParam) {
    //do some stuff or use the _myHelperFunction
}

function myFunction3(otherParam) {
    //do some stuff or use the _myHelperFunction
}

$scope.myFunction = myFunction
$scope.myFunction2 = myFunction2
$scope.myFunction3 = myFunction3

Or even better with ES6 destructuring

[$scope.myFunction, $scope.myFunction2, $scope.myFunction3] =
[myFunction, myFunction2, myFunction3]

Or:

angular.extend($scope, {
    myFunction,
    myFunction2,
    myFunction3
})

Perfect :) I liked this approach clean and neat. – jsduniya Oct 28 '15 at 12:16 — jsduniya, Oct 28 '15 at 12:16

score 0 · Answer 4 · answered Oct 29 '15 at 09:57

Keep independent function in the controller itself.

Adding all functions to the $scope will effect the application performance in long run and in complex apps with large functions

write function in $scope only if you want to access it in the html(view/partial) or in child $scopes

function written in parent $scope is accessible for the child $scopes

AngularJS : Is it necessary to bind all my controller methods to $scope

4 Answers4