0

我已经创建了一个下拉指令,我试图在将参数传递给指令时分配方法,我将从控制器调用这些方法。但是在第一次加载时,我没有在控制器中获得分配方法,但是当我在第二次加载时分配它(即在下拉更改事件中)并且它工作正常。

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

这是指令:

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

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

IE

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

那么,我怎样才能在第一次加载指令时获得传递参数中分配的方法?

4

1 回答 1

0

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

指令代码:

'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'
    }
}]);
于 2017-01-11T10:57:01.263 回答