Directive Parameter Not Initializing on First Load In AngularJs

Question

I'va made a Dropdown directive, i'm trying to assign methods on passing parameter to directive and i'll call these method from controller. but on first load i'm not getting the assign method in controller but when i'm assigning it on second load (i.e on dropdown change event)and it's working fine.

how can i get the methods on first load of directive in the calling controller after first load.

here is the Directive:

"use strict";
myApp.directive("selectDirective", [function () {
    return {
        restrict: "E",
        template: '<select class="form-control input-sm dropdown" data-ng-model="model.args.selectedItem" data-ng-options="item[model.args.displayField] for item in model.args.source" data-ng-change="model.itemChange(model.args.selectedItem)"><option value="">Select Any Item</option></select>',
        scope: {
        },
        bindToController: { args: "=" },
        controller: function () {
            var self = this;
            var initializeControl = function () {
                if (self.args == undefined) {
                    self.args = {};
                }
                if (self.args.method == undefined) {
                    self.args.method = {};
                }
                if (self.args.isDisabled == undefined) {
                    self.args.isDisabled = false;
                }
                if (self.args.displayField == undefined) {
                    self.args.displayField = '';
                    //alert('Display Field is blank for dropdown control.')
                }
                if (self.args.valueField == undefined) {
                    self.args.valueField = '';
                    //alert('Value Field is blank for dropdown control.')
                }
                if (self.args.source == undefined) {
                    self.args.source = {};
                }
                if (self.args.hide == undefined) {
                    self.args.hide = false;
                }
            }
            //here i'm assigning the methods in passing parameter
            var assignMethod = function () {
                self.args.method =
                    {
                        setEnable: function (args) {
                            self.args.isDisabled = !args;
                        },
                        setVisible: function (args) {
                            self.args.hide = !args;
                        },
                        getText: function () {
                            return self.args.selectedText;
                        },
                        getValue: function () {
                            return self.args.selectedValue;
                        },
                        setItem: function (item) {
                            debugger;
                            if (item != undefined) {
                                var index = self.args.source.indexOf(item);
                                self.args.selectecText = item[self.args.displayField];
                                self.args.selectecValue = item[self.args.valueField];
                                self.args.selectedItem = item;
                                self.args.selectedIndex = index;
                            }

                        }
                    }
            }
            self.itemChange = function (item) {
                debugger;
                if (item != undefined) {
                    var index = self.args.source.indexOf(item);
                    self.args.selectecText = item[self.args.displayField];
                    self.args.selectecValue = item[self.args.valueField];
                    self.args.selectedItem = item;
                    self.args.selectedIndex = index;
                }
            }
            initializeControl();
            assignMethod();
        },
        controllerAs: 'model'
    }
}]);

Here is the Calling Controller Code:

"use strict";
myApp.controller("homeController", [function () {
    var self = this;

    var initializeControl = function () {

        var myList = [{ id: 1, name: 'List1', value: 'List1' },
                                      { id: 2, name: 'List2', value: 'List2' }];
        self.argsParam = {
            displayField: 'name',
            valueField: "value",
            source: myList,
            selectecText: '',
            selectecValue: ''
        };
        self.clickMe = function () {
            debugger;
            var item = { id: 2, name: 'List2', value: 'List2' };
            self.argsParam.method.setItem(item);
        }
    };
    initializeControl();
}]);

View where i used the directive:

<div class="cold-md-12" ng-controller="homeController as model">
    <h1>Home Page</h1>
<select-directive args="model.argsParam"></select-directive>
    <input type="button" value="Click" ng-click="model.clickMe()" />
</div>

Scenario: If assigned method called second time inside directive on dropdown-change event then i can get these method on passing param.

i.e

 self.itemChange = function (item) {
                debugger;
                if (item != undefined) {
                    var index = self.args.source.indexOf(item);
                    self.args.selectecText = item[self.args.displayField];
                    self.args.selectecValue = item[self.args.valueField];
                    self.args.selectedItem = item;
                    self.args.selectedIndex = index;

                   // here i'm assigning these method on change event then it's working fine after changing the value otherwise no success
                    assignMethod();
                }
            }

So, How i can i get the methods assign in the passing parameter on First load of the directive?

Answer 1

I've moved the Controller Content to Link function in Directive and it's working fine, but I still didn't get any idea how my previous code not worked as expected.

Directive Code:

'use strict';
var testApp = angular.module('TestApp', []);
testApp.directive('sampleDirective', ['$http', function () {
    return {
        restrict: "E",
        scope: {},
        bindToController: { args: '=' },
        template: '<div class="row">' +
                    '<select class="form-control"' +
                    'data-ng-model="model.args.selectedItem"' +
                    'data-ng-options="item[model.args.displayField] for item in model.args.source"' +
                    'data-ng-change="model.itemChange(model.args.selectedItem)">' +
                    '<option value="">Select Any Item</option>' +
                    '</select>' +
                    '</div>',
        link: function (scope, element, attrs) {
            var self = scope.model;
            debugger;
            var initializeControl = function () {
                if (self.args == undefined) {
                    self.args = {};
                }
                if (self.args.method == undefined) {
                    self.args.method = {};
                }
                if (self.args.isDisabled == undefined) {
                    self.args.isDisabled = false;
                }
                if (self.args.displayField == undefined) {
                    self.args.displayField = '';
                    alert('Display Field is blank for dropdown control.')
                }
                if (self.args.valueField == undefined) {
                    self.args.valueField = '';
                    alert('Value Field is blank for dropdown control.')
                }
                if (self.args.source == undefined) {
                    self.args.source = {};
                }
                if (self.args.hide == undefined) {
                    self.args.hide = false;
                }
            }

            var assignMethod = function () {
                self.args.method =
                    {
                        setEnable: function (args) {
                            self.args.isDisabled = !args;
                        },
                        setVisible: function (args) {
                            self.args.hide = !args;
                        },
                        getText: function () {
                            return self.args.selectedText;
                        },
                        getValue: function () {
                            return self.args.selectedValue;
                        },
                        setItem: function (item) {
                            var index = self.args.source.indexOf(item);
                            self.args.selectecText = item[self.args.displayField];
                            self.args.selectecValue = item[self.args.valueField];
                            self.args.selectedItem = item;
                            self.args.selectedIndex = index;
                        }
                    };
            }

            self.itemChange = function (item) {
                if (item != undefined) {
                    var index = self.args.source.indexOf(item);
                    self.args.selectecText = item[self.args.displayField];
                    self.args.selectecValue = item[self.args.valueField];
                    self.args.selectedItem = item;
                    self.args.selectedIndex = index;
                }
            }

            initializeControl();
            assignMethod();
        },
        controller: function () {
        },
        controllerAs: 'model'
    }
}]);