using functions for controller in angularjs

Question

I was using controllers like this

.controller("somename",function($scope,$http){
//some get function to fetch data
$scope.data = dataReturned;
$scope.$apply();
});

It was working fine. Then I wanted to use functions after reading johnpapa's blog and changed it to the one like below

.controller("somename",someNameController);
function someNameController(){
var someName = this;
//some get function to fetch data
    this.data = dataReturned;
    this.$apply();
};

but this did not work as this.$apply is not a function

When I added $scope(which is not recommended) it started working

 .controller("somename",someNameController);
    function someNameController($scope){
    var someName = this;
    //some get function to fetch data
        $scope.data = dataReturned;
        $scope.$apply();
    };

is it possible to eliminate the passing of $scope in function someNameController($scope) ?

Err, why is taking $scope as an argument not recommended? Because it breaks on minification (for which, you can use the array or $inject solutions)? What about other dependency injections? — musically_ut
– musically_ut, Commented Sep 3, 2015 at 5:48
Let the blogs singing over there. The angular way of doing this is your first way, ie, explicitly injecting the dependencies (Moreover: .controller("somename", ['$scope', '$http', function($scope,$http){ ... }]) ). That code is much more clear. — Mert Mertce
– Mert Mertce, Commented Sep 3, 2015 at 5:56
@vignesh, are you sure that you need call $apply? can you provide sample plunkr? — Grundy
– Grundy, Commented Sep 3, 2015 at 6:29
you just do it wrong :-) i a bit fix it and $apply not needed, and jQuery also not needed — Grundy
– Grundy, Commented Sep 3, 2015 at 9:21
@vignesh, you just can see about settings for $http.get it same as $.get — Grundy
– Grundy, Commented Sep 3, 2015 at 9:41

user4169870 · Accepted Answer · 2015-09-03 05:50:40Z

2

why do you want to skip the $scope? in order to get the reference of all the methods and variables in the controller you have to use the $scope .thanks

answered Sep 3, 2015 at 5:50

user4169870

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

1 Comment

Tarun Dugar Over a year ago

open the style guide, it recommends using 'this' contrary to scope. He wants to follow that.

marapet · Accepted Answer · 2015-09-03 06:54:07Z

1

You're following John Papa's style guide and use the so-called controller-as syntax.

The controller-as syntax allows using instances of functions in views, and therefore it isn't necessary to inject $scope in order to make data available to the view. A simple this.data = mydata is enough.

However, when using special functionality available in $scope, the $scope still has to be injected into the controller function. $apply(), $watch() etc are typically part of that. This article explains exactly that.

About the controllerAs syntax from John Papa's style guide (emphasis mine):

Helps avoid the temptation of using $scope methods inside a controller when it may otherwise be better to avoid them or move the method to a factory, and reference them from the controller. Consider using $scope in a controller only when needed. For example when publishing and subscribing events using $emit, $broadcast, or $on consider moving these uses to a factory and invoke from the controller.

The short answer is therefore no - there is no way of using $scope methods without injecting $scope or an other service which has $scope as a dependency.

edited Sep 3, 2015 at 6:54

answered Sep 3, 2015 at 6:49

marapet

56.9k13 gold badges176 silver badges186 bronze badges

2 Comments

Vignesh Subramanian Over a year ago

Thanks @marapet the $scope is not getting updated if i am not using $scope.$apply after assigning result data to $scope variable, thats why i needed it. Guess i should look for some other way for this instead of using $scope.$apply

marapet Over a year ago

What do you mean by '$scope is note getting updated' - in your view? Do you also use the controller-as syntax in your view (in the controller: this.data = ... and in your view: ng-controller="somename as vw" and then {{vw.data}} ?

Matteo Gabriele · Accepted Answer · 2015-09-03 07:42:36Z

1

The easiest way to deal with controllers as functions and inject dependencies without breaking anything during the minification process.

(function(){

    'use strict';

    var MainCtrl = function($scope){

       // Do something

    };

    MainCtrl.$inject = [
        '$scope'
    ];

    app.controller('MainCtrl', MainCtrl);

})();

edited Sep 3, 2015 at 7:42

answered Sep 3, 2015 at 6:29

Matteo Gabriele

1649 bronze badges

5 Comments

Grundy Over a year ago

what you want say? :-)

Matteo Gabriele Over a year ago

The easiest way to deal with controllers as functions and the way you can inject dependencies without breaking anything during the minification process.

Grundy Over a year ago

you can add this explain to your answer :-)

Matteo Gabriele Over a year ago

I thought was self explanatory because of the context. I've updated the answer. :)

Grundy Over a year ago

Is there any benefit to allowing code-only answers while blocking code-only questions?

Collectives™ on Stack Overflow

using functions for controller in angularjs

3 Answers 3

1 Comment

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related