Angular JS指令：如何設置選定值或默認值

Question

我創建了指令表單控件（tesxt，select，radio）。 在指令中，我傳遞了要在指令函數中訪問的值，如果未設置此值或該值為空，則從問題中設置默認值（data._pageAttributes.defaultValue）

的HTML

<div ng-repeat="que in questions[$state.current.name]">
                        <div ng-if="que.QuestionData._fieldType === 'text'" >
                            <!-- {{answers[que.QuestionData._attributeName]}} -->
                            <text-control-dir data="que.QuestionData" default="94403"></text-control-dir>
                        </div>  
                        <div ng-if="que.QuestionData._fieldType === 'select'" >
                            <select-control-dir data="que.QuestionData" default="2016"></select-control-dir>
                        </div>
                        <div ng-if="que.QuestionData._fieldType === 'radio'" >
                            <radio-control-dir data="que.QuestionData"></radio-control-dir>
                        </div>
                        <div ng-if="que.QuestionData._fieldType === 'hidden' && que.QuestionData._attributeName != 'CBQ'" >
                            <hidden-control-dir data="que.QuestionData"></hidden-control-dir>
                        </div>
                    </div>

controlDirective.js

(function () {
    "use strict";

    angular
            .module("autoQuote")
            .directive('textControlDir', [textControlDir])
            .directive('selectControlDir', [selectControlDir])
            .directive('radioControlDir', [radioControlDir])
            .directive('hiddenControlDir', [hiddenControlDir]);

    function textControlDir()
    {
        return {
            transclude: true,
            restrict: 'E',
            scope: {
                data: '=data',
                default: '=default'
            },
            template: "<div ng-transclude></div><label>{{data._text}} </label><input ng-model='answer.PC' type='text' name='{{data._attributeName}}' id='{{data._attributeName}}' value='' >"
            ,
            link: function (scope, element, attrs)
            {
                console.log('default');
                console.log(attrs.default);
                if(attrs.default == '')
                {
                    attrs.default = data._pageAttributes.defaultValue;
                }

            }
        };
    }

    function selectControlDir()
    {
        return {
            transclude: true,
            restrict: 'E',
            scope: {
                data: '=data'
            },
            template: "<div ng-transclude></div><label>{{data._text}} </label><select type='text' name='{{data._attributeName}}' id='{{data._attributeName}}' >\n\
<option ng-repeat='ans in data._answerOptions'>{{ans._promptText}}</option></select>"
            ,
            link: function (scope, element, attrs)
            {
                //console.log("scope.data.QuestionData", scope.data.QuestionData);
            }
        };
    }

    function radioControlDir()
    {
         return {
            transclude: true,
            restrict: 'E',
            scope: {
                data: '=data'
            },
            template: "<div ng-transclude></div><label>{{data._text}} </label><input type='radio' name='{{data._attributeName}}' id='{{data._attributeName}}' value='Yes' >\n\
\n\
<input type='radio' name='{{data._attributeName}}' id='{{data._attributeName}}' value='No' >\n\
"
            ,
            link: function (scope, element, attrs)
            {
                //console.log("scope.data.QuestionData", scope.data.QuestionData);
            }
        };
    }

    function hiddenControlDir()
    {
        return {
            transclude: true,
            restrict: 'E',
            scope: {
                data: '=data'
            },
            template: "<div ng-transclude></div><label>{{data._text}} </label><input type='hidden' name='{{data._attributeName}}' id='{{data._attributeName}}' value='' >"
            ,
            link: function (scope, element, attrs)
            {
                //console.log(scope.data);
            }
        };
    }

}());

CA.js文件包含所有問題和我們正在為表單問題循環的默認值。

在指令中，我想編寫操作來檢查值是否在默認屬性中傳遞。 如果否，則從question.que獲取值並在輸入中設置select並選擇control。

 link: function (scope, element, attrs)
        {
            if(attrs.default == '')
            {
                attrs.default = data._pageAttributes.defaultValue;
            }

        }

但這對我不起作用。 在這里，我為文本（郵政編碼）94403和車輛年份2016設置了硬編碼的默認值

對於郵政編碼：94403應該在輸入框中填寫，如果不是空白，則為35004（來自CA.json）

Answer 1

如果您沒有設置默認值，它將是undefined不是empty string

link: function (scope, element, attrs)
       {
           if(attrs.default)
           {
               attrs.default = scope.data._pageAttributes.defaultValue;
           }

       }

它將檢查為empty和undefined 。

Answer 2

如果與HTML元素對應的數據已更改，則可以使用ng-model代替默認值，並在控制器中設置ng-model的值。

http://jsfiddle.net/halirgb/Lvc0u55v/

<input ng-model="example">