指令参数未在首次加载时初始化 AngularJs

Question

我制作了一个 Dropdown 指令，我正在尝试分配将参数传递给指令的方法，我将从控制器调用这些方法。但是在第一次加载时我没有在控制器中获得分配方法但是当我在第二次加载时分配它（即下拉更改事件）并且它工作正常。

如何在第一次加载后在调用控制器中获取指令的第一次加载方法。

这是指令：

"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'
    }
}]);

调用控制器代码如下：

"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();
}]);

查看我在哪里使用指令：

<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>

场景：如果分配的方法在下拉更改事件的指令中第二次调用，那么我可以在传递参数时获得这些方法。

即

 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

我已将控制器内容移动到指令中的 Link 功能，并且它工作正常，但我仍然不知道我以前的代码如何没有按预期工作。

指令代码：

'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'
    }
}]);

指令参数未在首次加载时初始化 AngularJs

Directive Parameter Not Initializing on First Load In AngularJs

angularjs

angularjs-directive

isolate-scope

angularjs-controlleras