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

威廉姆斯

我真的为此撞上了一堵墙,我知道我可能在这里遗漏了一些东西,但是我被困住了并且需要帮助。我想做的是使用服务来填充ng-options指令中的选项;但是,ng-options在自定义指令中,并且我已经尝试了所有方法,包括跟踪,测试指令外,指令内等。有人可以看看下面的代码,看看是否可以发现我所缺少的东西?任何帮助是极大的赞赏。它将一直执行到对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>
杰梅斯

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

编写自定义指令以将工具提示添加到AngularJS(TypeScript)中的ng-options

来自分类Dev

ANgularjs:ng-repeat和嵌套的自定义指令

来自分类Dev

ANgularjs:ng-repeat和嵌套的自定义指令

来自分类Dev

在AngularJS自定义验证指令中调用异步服务

来自分类Dev

使用指令绑定angularjs中的自定义事件

来自分类Dev

使用angularjs的电话格式的自定义指令

来自分类Dev

使用自定义指令与angularjs进行验证

来自分类Dev

在自定义AngularJS指令中使用$ timeout

来自分类Dev

使用自定义指令与angularjs进行验证

来自分类Dev

使用AngularJs动态指令进行自定义视图

来自分类Dev

如何使用angularjs预填充选择选项自定义指令

来自分类Dev

使用自定义指令,ng-show和$ scope在Angularjs中隐藏/显示元素

来自分类Dev

使用自定义指令,ng-show和$ scope在Angularjs中隐藏/显示元素

来自分类Dev

在 AngularJS 中的 ng-repeat 指令中使用自定义过滤器订购数据

来自分类Dev

如何在自定义指令中设置ng-model-options?

来自分类Dev

在自定义指令中使用ng Repeat来填充选择下拉列表

来自分类Dev

angularjs ng-options从options数组中选择作为自定义对象

来自分类Dev

在自定义指令中调用服务

来自分类Dev

AngularJS自定义指令ng-repeat,无法调用null的方法“ insertBefore”

来自分类Dev

复选框上ng-indeterminate属性的AngularJS自定义指令

来自分类Dev

AngularJS自定义指令:如何更新ng-model中指定的父变量?

来自分类Dev

AngularJS-ng-change作为自定义指令中的一个选项

来自分类Dev

触发自定义验证指令后,AngularJS ng-model值丢失

来自分类Dev

与ng-repeat相同的HTML元素上的AngularJS自定义指令

来自分类Dev

AngularJS-在ng-bind-html之后运行自定义指令

来自分类Dev

angularjs-ng-include中的自定义指令不起作用

来自分类Dev

AngularJS-从自定义指令将参数从ng-repeat传递到控制器

来自分类Dev

在ng-click上将自定义AngularJS指令附加到容器HTML元素

来自分类Dev

AngularJS:ng-repeat在具有隔离范围的自定义指令上

Related 相关文章

  1. 1

    编写自定义指令以将工具提示添加到AngularJS(TypeScript)中的ng-options

  2. 2

    ANgularjs:ng-repeat和嵌套的自定义指令

  3. 3

    ANgularjs:ng-repeat和嵌套的自定义指令

  4. 4

    在AngularJS自定义验证指令中调用异步服务

  5. 5

    使用指令绑定angularjs中的自定义事件

  6. 6

    使用angularjs的电话格式的自定义指令

  7. 7

    使用自定义指令与angularjs进行验证

  8. 8

    在自定义AngularJS指令中使用$ timeout

  9. 9

    使用自定义指令与angularjs进行验证

  10. 10

    使用AngularJs动态指令进行自定义视图

  11. 11

    如何使用angularjs预填充选择选项自定义指令

  12. 12

    使用自定义指令,ng-show和$ scope在Angularjs中隐藏/显示元素

  13. 13

    使用自定义指令,ng-show和$ scope在Angularjs中隐藏/显示元素

  14. 14

    在 AngularJS 中的 ng-repeat 指令中使用自定义过滤器订购数据

  15. 15

    如何在自定义指令中设置ng-model-options?

  16. 16

    在自定义指令中使用ng Repeat来填充选择下拉列表

  17. 17

    angularjs ng-options从options数组中选择作为自定义对象

  18. 18

    在自定义指令中调用服务

  19. 19

    AngularJS自定义指令ng-repeat,无法调用null的方法“ insertBefore”

  20. 20

    复选框上ng-indeterminate属性的AngularJS自定义指令

  21. 21

    AngularJS自定义指令:如何更新ng-model中指定的父变量?

  22. 22

    AngularJS-ng-change作为自定义指令中的一个选项

  23. 23

    触发自定义验证指令后,AngularJS ng-model值丢失

  24. 24

    与ng-repeat相同的HTML元素上的AngularJS自定义指令

  25. 25

    AngularJS-在ng-bind-html之后运行自定义指令

  26. 26

    angularjs-ng-include中的自定义指令不起作用

  27. 27

    AngularJS-从自定义指令将参数从ng-repeat传递到控制器

  28. 28

    在ng-click上将自定义AngularJS指令附加到容器HTML元素

  29. 29

    AngularJS:ng-repeat在具有隔离范围的自定义指令上

热门标签

归档