繁体   English   中英

使用从服务填充的 ng-options 的 AngularJS 自定义指令

[英]AngularJS Custom Directive using ng-options populated from service

我真的遇到了这个问题,我知道我可能在这里遗漏了一些东西,但我被卡住了,需要帮助。 我想要做的是使用服务来填充 ng-options 指令中的选项; 但是,ng-options 在自定义指令内,我已经尝试了从 track by 到在指令外、指令内等测试它的所有内容。有人可以看看这个代码,看看你是否能发现我遗漏了什么吗? 非常感谢任何帮助。 只要执行对 ng-model 的更新,它就会起作用; 但是,在页面登录和记录选择时,它最初不会选择正确的选项,但是如果我将曲目取出,它将使用正确的选择进行初始化,当/如果我这样做时它不会更新 ng-model .

angular
    .module('app')
    .controller('mainCtrl', ['acctList', 'CONSTANTS', 'FORMFIELDS', function(acctList, CONSTANTS, FORMFIELDS) {
        var mainCtrl = this;

        mainCtrl.form = {};

        mainCtrl.formFields = FORMFIELDS;

        mainCtrl.currentRecord = null;
        mainCtrl.editedRecord = {};

        mainCtrl.setCurrentRecord = function(value) {
            mainCtrl.currentRecord = value;
            mainCtrl.editedRecord = angular.copy(mainCtrl.currentRecord);
        };

        mainCtrl.statuses = CONSTANTS.statuses;
    }])
    .value('FORMFIELDS', [
            {
                key: 'active_flag',
                inputtype: 'select',
                type: 'text',
                class: 'form-control',
                id: 'activeFl',
                name: 'activeFl',
                placeholder: 'Active Flag',
                required: true,
                maxlength: 1,
                disabled: false,
                labelfor: 'inputActiveFl',
                labeltext: 'Active Flag',
                field: 'mainCtrl.editedRecord.ACTIVE_FL',
                options: 'list as list.desc for list in mainCtrl.statuses track by list.value'
            }
        ])
    .value('CONSTANTS',
            {
                statuses: [
                    {
                        id: 1,
                        value: "Y",
                        desc: "Active"
                    },
                    {
                        id: 2,
                        value: "N",
                        desc: "Inactive"
                    }
                ]
            }
        )
    .directive('formTemplate', ['$compile', function($compile) {
        function linker(scope, element, attr) {
            scope.$watch(attr.modeltemp, function(modeltemp) {

                // if ngModel already equals modeltemp or modeltemp doesn't exist, return
                if (attr.ngModel == modeltemp || !modeltemp) return;

                // remove all attributes to prevent duplication
                element.removeAttr('placeholder');
                element.removeAttr('type');
                element.removeAttr('class');
                element.removeAttr('id');
                element.removeAttr('name');
                element.removeAttr('ng-required');
                element.removeAttr('maxlength');
                element.removeAttr('ng-disabled');

                // add the ng-model attribute presently tied to modeltemp
                element.attr('ng-model', modeltemp);

                // if modeltemp is blank, then remove ng-model, as it would be null
                if (modeltemp == '') {
                    element.removeAttr('ng-model');
                }

                // Unbind all previous event handlers, this is
                // necessary to remove previously linked models.
                element.off();

                // run a compile on the element, injecting scope, to reconstruct the element
                $compile(element)(scope);
            });

            console.log(scope.acctCtrl);
        }

        // dynamic templating function associated with the templateUrl in the DDO
        function template (tElement, tAttrs) {

            // set the type variable equal to the value from the tAttr for 'inputtype' coming from the view
            var type = tAttrs['inputtype'];
            // just declaring the return variable for cleanliness
            var tpl;
            // begin the switch-case statement for each inputtype, then set it's return variable equal to the respective url
            switch(type) {
                case 'input':
                    tpl = '/common/directives/formTemplate/formTemplate.template.html';
                    break;
                case 'select':
                    tpl = '/common/directives/formTemplate/formTemplateSelect.template.html';
                    break;
                default:
                    tpl = '/common/directives/formTemplate/formTemplate.template.html';
                    break;
            }
            return tpl;
        }

        return {
            restrict: 'EA',
            replace: true,
            templateUrl: template,
            link: linker
        };
    }])
    <form class="form-horizontal" ng-submit="submit()" name="mainCtrl.form.newAcctForm">
<div class="col-lg-6 form-fields" ng-repeat="fields in mainCtrl.formFields" ng-class="{ 'has-error': mainCtrl.form.newAcctForm.{{fields.name}}.$dirty }">
    <label class="control-label" for="{{fields.labelfor}}">{{fields.labeltext}}</label>
    <div form-template modeltemp="fields.field" inputtype="{{fields.inputtype}}"></div>
</div>
    </form>

    <select class="{{fields.class}}" id="{{fields.id}}" name="{{fields.name}}" ng-options="{{fields.options}}" ng-required="{{fields.required}}" maxlength="{{fields.maxlength}}" ng-disabled="{{fields.disabled}}">
<option value="">Please select...</option>
    </select>

虽然这确实有效,但您是否考虑过使用生命周期钩子,等到视图加载/初始化之后? 您的解决方案有效,但这有点像在蚂蚁山上使用火箭发射器。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM