在自定义指令中动态添加ng-model不起作用

时间:2016-03-14 15:34:38

标签: javascript angularjs json angularjs-directive

我在Stackoverflow上搜索过这个问题,但都与此不同。虽然问题可能相同,但实施却不同。

该指令接受一个名为config的JSON数组。其中包含输入或下拉列表的属性。我还收到必须在ngModel中绑定的变量。一切都很好,如ng-maxlength ng-minlength,但ng-model没有。我无法获取值或简单地说没有双向绑定。另外,为了获取单个对象中的所有值,我在自定义指令的name属性中附加了一个名为pgCard的字符串。使它看起来像pgCard.*直接用作json对象。但一切都是徒劳的。我甚至尝试删除pgCard但没有用。

以下是我的自定义指令元素标记

<program-gateway config="configArrayCard" name="pgCard"></program-gateway>

这是我的自定义指令。

app.directive('programGateway',['$compile',
                                        function($compile){
    return {
        restrict : 'E',
        replace :true,
        template:"<div class='row'></div>",
        scope:{
            config:"=",
            name:"@"
        },
        link: function(scope,e,attr){
            var modelPrefix=scope.name+"." || "";

            var field="",model="";

            var max="",min="",maxlen="",req="",options="";

            var leftHTML="",rightHTML="",innerHTML="";

            scope.config=sortByKey(scope.config,"propertyKey");

            angular.forEach(scope.config,function(value,key){
                model=modelPrefix+value.propertyKey;
                var midLen=(Math.floor(scope.config.length/2))+(Math.floor(scope.config.length%2));
                if(!value.propertyInfo.selection){
                    if(value.propertyInfo.hasOwnProperty("max")){
                        max="data-ng-maxlength='"+value.propertyInfo.max+"'";
                        maxlen="maxlength='"+value.propertyInfo.max+"'"
                    } if(value.propertyInfo.hasOwnProperty("min")){
                        min="data-ng-minlength='"+value.propertyInfo.min+"'";
                    }
                    req=(value.propertyInfo.optional)?"":"required";
                    field="<input "+req+" class='form-control' type='text' id='"+model+"' data-ng-model='"+model+"' "+max+" "+min+" "+maxlen+">";
                }else{
                     var optArr="[\""+(value.propertyInfo.selectionOptions).replace(/,/g, '","')+"\"]";
                    field="<select data-ng-options='opt for opt in "+optArr+"' "+req+" data-ng-model='"+model+"' class='form-control' id='"+model+"'>"+
                            "<option value=''>Select </option>"+
                          "</select>";
                }
                if(key<midLen){
                    leftHTML+="<div class='form-group'>"+
                                    "<label for='"+value.propertyInfo.propertyLabel+"' class='col-sm-5 control-label'><span data-ng-hide='"+value.propertyInfo.optional+"' class='red'>*</span>"+value.propertyInfo.propertyLabel+":</label>"+
                                    "<div class='col-sm-7'>"
                                        +field+
                                    "</div>"+
                                "</div>";
                }else{
                    rightHTML+="<div class='form-group'>"+
                                    "<label for='"+value.propertyInfo.propertyLabel+"' class='col-sm-5 control-label'><span data-ng-hide='"+value.propertyInfo.optional+"' class='red'>*</span>"+value.propertyInfo.propertyLabel+":</label>"+
                                    "<div class='col-sm-7'>"
                                        +field+
                                    "</div>"+
                                "</div>";
                }//if closed
            });// for closed
            innerHTML="<div class='col-sm-6'>"+leftHTML+"</div>"+
                      "<div class='col-sm-6'>"+rightHTML+"</div>";
            e.html(innerHTML);
            scope.$watch(function() {
                 return scope.pgCard = scope.pgCard;  
             });
            $compile(e.contents())(scope);
        }
    }
}]);

这是我收到的json的快照

"config":[{"propertyKey":"reportGroup","editable":true,"propertyInfo"
:{"max":3,"optional":true,"propertyLabel":"Report Group","selection":false}},{"propertyKey":"sendStatementToCompany"
,"propertyValue":"Yes","editable":true,"propertyInfo":{"optional":false,"propertyLabel":"Send Statement
 to Company","selection":true,"selectionOptions":"Yes,No","defaultValue":"Yes"}}]

请帮我做错事。

0 个答案:

没有答案