95

When I load a view, I'd like to run some initialization code in its associated controller.

To do so, I've used the ng-init directive on the main element of my view:

<div ng-init="init()">
  blah
</div>

and in the controller:

$scope.init = function () {
    if ($routeParams.Id) {
        //get an existing object
        });
    } else {
       //create a new object
    }

    $scope.isSaving = false;
}

First question: is this the right way to do it?

Next thing, I have a problem with the sequence of events taking place. In the view I have a 'save' button, which uses the ng-disabled directive as such:

<button ng-click="save()" ng-disabled="isClean()">Save</button>

the isClean() function is defined in the controller:

$scope.isClean = function () {
    return $scope.hasChanges() && !$scope.isSaving;
}

As you can see, it uses the $scope.isSaving flag, which was initialized in the init() function.

PROBLEM: when the view is loaded, the isClean function is called before the init() function, hence the flag isSaving is undefined. What can I do to prevent that?

4 Answers 4

139

When your view loads, so does its associated controller. Instead of using ng-init, simply call your init() method in your controller:

$scope.init = function () {
    if ($routeParams.Id) {
        //get an existing object
    } else {
        //create a new object
    }
    $scope.isSaving = false;
}
...
$scope.init();

Since your controller runs before ng-init, this also solves your second issue.

Fiddle


As John David Five mentioned, you might not want to attach this to $scope in order to make this method private.

var init = function () {
    // do something
}
...
init();

See jsFiddle


If you want to wait for certain data to be preset, either move that data request to a resolve or add a watcher to that collection or object and call your init method when your data meets your init criteria. I usually remove the watcher once my data requirements are met so the init function doesnt randomly re-run if the data your watching changes and meets your criteria to run your init method.

var init = function () {
    // do something
}
...
var unwatch = scope.$watch('myCollecitonOrObject', function(newVal, oldVal){
                    if( newVal && newVal.length > 0) {
                        unwatch();
                        init();
                    }
                });
10
  • 8
    What if you need data from some models to run initialization? Or just some data available on the page when rendering, so that initialization could work?
    – Eugene
    Commented Apr 1, 2014 at 9:29
  • 40
    An init function doesn't need to be attached to $scope. Make your init function private. You never want an init function to run more than once so don't expose it on $scope. Commented Oct 18, 2014 at 18:35
  • 2
    I would like to run the init function any time my view is shown but I have no clue how, the function is only run once. Any ideas how I can run it on every page/template load?
    – Jorre
    Commented Nov 20, 2014 at 16:28
  • 9
    I'm not angular expert, but this approach sucks for testing, since init() is called at simply controller instantiation...in other words, when you need to test a single method of controller, init() is called as well ..breaking the tests! Commented Oct 27, 2015 at 20:43
  • 1
    What @WagnerLeonardi said. This approach makes testing your "private" init() method quite difficult. Commented Apr 4, 2016 at 16:17
41

Since AngularJS 1.5 we should use $onInit which is available on any AngularJS component. Taken from the component lifecycle documentation since v1.5 its the preferred way:

$onInit() - Called on each controller after all the controllers on an element have been constructed and had their bindings initialized (and before the pre & post linking functions for the directives on this element). This is a good place to put initialization code for your controller.

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {

    //default state
    $scope.name = '';

    //all your init controller goodness in here
    this.$onInit = function () {
      $scope.name = 'Superhero';
    }
});

Fiddle Demo

An advanced example of using component lifecycle:

The component lifecycle gives us the ability to handle component stuff in a good way. It allows us to create events for e.g. "init", "change" or "destroy" of an component. In that way we are able to manage stuff which is depending on the lifecycle of an component. This little example shows to register & unregister an $rootScope event listener $on. By knowing, that an event $on bound on $rootScope will not be unbound when the controller loses its reference in the view or getting destroyed we need to destroy a $rootScope.$on listener manually.

A good place to put that stuff is $onDestroy lifecycle function of an component:

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope, $rootScope) {

  var registerScope = null;

  this.$onInit = function () {
    //register rootScope event
    registerScope = $rootScope.$on('someEvent', function(event) {
        console.log("fired");
    });
  }

  this.$onDestroy = function () {
    //unregister rootScope event by calling the return function
    registerScope();
  }
});

Fiddle demo

0
17

Or you can just initialize inline in the controller. If you use an init function internal to the controller, it doesn't need to be defined in the scope. In fact, it can be self executing:

function MyCtrl($scope) {
    $scope.isSaving = false;

    (function() {  // init
        if (true) { // $routeParams.Id) {
            //get an existing object
        } else {
            //create a new object
        }
    })()

    $scope.isClean = function () {
       return $scope.hasChanges() && !$scope.isSaving;
    }

    $scope.hasChanges = function() { return false }
}
4
  • 1
    is there a reason that init code is in an anonymous closure? Commented Sep 29, 2015 at 19:15
  • @AdamTolley there is no particular reason. He just defines a function and immediately calls it, without binding it to a var.
    – Tair
    Commented Sep 30, 2015 at 19:10
  • 7
    How can you unit test the private init() function properly this way? Commented Apr 4, 2016 at 16:22
  • Only public members are unit tested. Unit tests shouldn't be dependent on what classes do privately to get the expected results.
    – Phil
    Commented Jun 12, 2017 at 10:42
14

I use the following template in my projects:

angular.module("AppName.moduleName", [])

/**
 * @ngdoc controller
 * @name  AppName.moduleName:ControllerNameController
 * @description Describe what the controller is responsible for.
 **/
    .controller("ControllerNameController", function (dependencies) {

        /* type */ $scope.modelName = null;
        /* type */ $scope.modelName.modelProperty1 = null;
        /* type */ $scope.modelName.modelPropertyX = null;

        /* type */ var privateVariable1 = null;
        /* type */ var privateVariableX = null;

        (function init() {
            // load data, init scope, etc.
        })();

        $scope.modelName.publicFunction1 = function () /* -> type  */ {
            // ...
        };

        $scope.modelName.publicFunctionX = function () /* -> type  */ {
            // ...
        };

        function privateFunction1() /* -> type  */ {
            // ...
        }

        function privateFunctionX() /* -> type  */ {
            // ...
        }

    });
2
  • this looks clean, but the iffe precludes you from running methods that you're defining on the scope, which is often what we need to do, run them once at startup, and then have them also on the scope to be able to run them again as needed by the user
    – chrismarx
    Commented Dec 23, 2015 at 20:03
  • that is, if it's run at the top of the controller-
    – chrismarx
    Commented Dec 23, 2015 at 20:17

Not the answer you're looking for? Browse other questions tagged or ask your own question.