javascriptangularjsangularjs-directiveng-optionsangularjs-ng-options

AngularJS Custom Directive using ng-options populated from service


I've really hit a brick wall with this, and I know I'm probably missing something here, but I'm stuck and need help. What I'm trying to do is use a service to populate the options in an ng-options directive; however, the ng-options are inside of a custom directive, and I've tried everything from track by, to testing it outside of the directive, inside the directive, etc. Can someone please take a look at this code and see if you can spot what I'm missing? Any help is greatly appreciated. It WILL work as far as executing the update to the ng-model; however, at page landing and record selection, it will not initially select the proper option, but if I take the track by out, it will initialize with the proper selection, it just won't update ng-model when/if I do that.

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>

Solution

  • While this does work, did you consider using lifecycle hooks instead, waiting until after the view has loaded/initialized? Your solution works, but it's a bit like using a rocket launcher on an ant hill.