Assistance with angularjs code

Question

I am new to angular, and have to work with angularjs, also. The majority I can relate to angular, but there is the following code that has me a bit baffled, and any assistance is appreciated.

angular
        .module('Test')
        .directive('nbTest', [savedTest]);

    /* @ngInject */
    function savedTest() {
        var directive = {
            restrict: 'E',

            scope: true,
            templateUrl: 'test/newTest/directives/savedTest/nbSavedTests.tmpl.html',
            controllerAs: 'vm',
            controller: ['$scope', '$mdUtil', '$mdDialog', '$timeout', 'nbApplicationFactory', 'dateService', savedTestCtrl]
        };
        return directive;

What I am specifically confused about is the array for the 'controller'. What I am wanting to do is use the $onInit life cycle hook, but am baffled how to when the controller is defined how it is.

The controller array is a list of named dependencies (strings), followed by the controller function itself (savedTestCtrl). docs.angularjs.org/guide/di#dependency-annotation — bags
– bags, Commented Jan 16, 2018 at 20:28

Stanislav Kvitash · Accepted Answer · 2018-01-16 20:20:39Z

1

This is how DI is done in AngularJS. To implement $onInit life cycle hook you just need to implement it inside of the controller function like:

function savedTestCtrl($scope, $mdUtil, $mdDialog, $timeout, nbApplicationFactory, dateService) {
    var ctrl = this;
    ctrl.$onInit = onInit;

    function onInit() {
        //your code here
    }
}

answered Jan 16, 2018 at 20:20

Stanislav Kvitash

4,63221 silver badges29 bronze badges

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

Comments

tiagolisalves · Accepted Answer · 2018-01-16 22:40:09Z

Following the sequence of your questions.

First, the array literal in the 'controller' property has the purpose of inject dependencies in the controller. The behaviour of your controller is defined in the savedTestCtrl function, the last element of the array. The dependencies defined in the array are injected by the framework, so you can get the dependencies inside your controller with params. The controller must have the same number of params defined in the array. For example, your savedTestCtrl function must have the following definition:

function savedTestCtrl($scope, $mdUtil, $mdDialog, $timeout, nbApplicationFactory, dateService){

  console.log(dateService.text); //prints the property text of your dateService object

}

Second, the $onInit lifecycle hook need to be defined with a function as a property of the controller. Like this:

function savedTestCtrl($scope, $mdUtil, $mdDialog, $timeout,nbApplicationFactory, dateService){

  var vm = this; 
  vm.$onInit = function(){
    console.info('The init of savedTestCtrl')
  } 

}

Because this lifecycle hook is available starting from angular 1.5, make sure that you are using this version or above.

Collectives™ on Stack Overflow

Assistance with angularjs code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related