AngularJS controller and methods

Question

I'm a beginner in angularjs with a few questions about controllers.
Here's my example controller:

function exampleController($scope)
{
   $scope.sampleArray = new Array();

   $scope.firstMethod = function()
   {
      //initialize the sampleArray
   };

   $scope.secondMethod = function()
   {
      this.firstMethod();
   };
};

Here are my questions:

How I can call firstMethod from secondMethod? Is the way I did it correct, or is better way?
How I can create a constructor for the controller? I need to call the secondMethod that call the firstMethod that initialize the sampleArray?
How I can call a specific method from html code? I found ng-initialize but I can't figure out how to use it.

Josh David Miller · Accepted Answer · 2013-01-18 21:40:44Z

32

You call a method the same way you declared it:

$scope.secondMethod = function() {
  $scope.firstMethod();
};

Which you can also call from HTML like so:

<span>{{secondMethod()}}</span>

But controllers don't really have "constructors" - they're typically used just like functions. But you can place initialization in your controller function and it will be executed initially, like a constructor:

function exampleController($scope) {
  $scope.firstMethod = function() {
    //initialize the sampleArray
  };

  $scope.secondMethod = function() {
    $scope.firstMethod();
  };

  $scope.firstMethod();
}

answered Jan 18, 2013 at 21:40

Josh David Miller

121k16 gold badges129 silver badges95 bronze badges

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

3 Comments

Raul Luna Over a year ago

Isn't $scope deprecated in neweer versions of AngularJS?

Josh David Miller Over a year ago

@RaulLuna Yes, but the answer is 4.5 years old. :-)

Raul Luna Over a year ago

Er... well, but looking in google appears this answer. I thought it worth mention it.

Christopher Marshall · Accepted Answer · 2013-01-18 21:41:21Z

you call the first method by using $scope.

So

   $scope.secondMethod = function()
   {
      $scope.firstMethod();
   };

Not really sure what you mean in your second question.

For your third quesiton, you can either have the method run automatically "onload" on controller, OR run it via an front-end angular binding.

e.g. Run Automatically

function exampleController($scope)
{
   $scope.sampleArray = new Array();

   $scope.firstMethod = function()
   {
      //initialize the sampleArray
   };

   $scope.secondMethod = function()
   {
      $scope.firstMethod();
   };


   $scope.secondMethod(); // runs automatically.

};

Run on binding

<div ng-controller="ExampleController"> <!-- example controller set up in namespace -->

<button class="btn" ng-click="secondMethod()">Run Second Method</button>

</div>

Community · Accepted Answer · 2017-05-23 11:33:13Z

7

@Josh and @Christopher already covered your questions, so I won't repeat that.

I found ng-initialize but I can't know how to use that :-(

The directive is actually ng-init. Sometimes (e.g., if you are starting to use Angular in parts of an application and you still need to dynamically generate a view/HTML page server-side), ng-init can sometimes a useful way to initialize something. E.g.,

<div ng-controller="ExampleCtrl">
   <form name="myForm">
     <input type="text" ng-model="folder" ng-init="folder='Bob'">

Here's an example where someone needed to use ng-init: rails + angularjs loading values into textfields on edit

I'd also like to mention that controllers are not singletons. If you use ng-view, each time you go to a different route, a new controller is created. The controller associated with the view you are leaving is destroyed, and the controller associated with the view you are going to is executed. So that "initialization code" in a controller could get executed multiple times while an app is running. E.g, if you visit a page, go elsewhere, then come back, the same controller function (and its "initialization code") would be executed twice.

If you want something to truly run once, put it in a service or in a module's config() or run() methods. (Services are singletons, and hence each service is instantiated only once, so initialization code in a service is only run once.)

edited May 23, 2017 at 11:33

CommunityBot

11 silver badge

answered Jan 19, 2013 at 2:43

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

1 Comment

fool4jesus Over a year ago

I have one of those cases where ng-init can't be avoided. There's lots of warnings against using it ... and using it is definitely a hack that makes unit testing harder. But sometimes ya gotta do what ya gotta do...

Collectives™ on Stack Overflow

AngularJS controller and methods

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related