Question

我在Angular JS中有一个奇怪的问题，我无法将数据绑定到Select控件。让我解释一下这个问题。我在我的应用程序中动态创建控件，创建控件所需的所有信息都来自数据库。与控件类型（文本框，复选框下拉列表），控件样式，控制ng模型名称，控制ng选项名称等一样。控件是通过角度指令构建的。现在控件被创建并通过ng-model获取数据绑定。但是对于选择标记，ng模型不起作用。代码如下：

app.directive('controlTemplate', ['$compile', function ($compile) {

var templatetext = '';
function linker(scope, element, attrs, ngModelController) {
    scope.checkbocchecked = 1;
    switch (scope.pctDef.FieldType) {
        case 'TextTemplateControl':
            templatetext = '<input type="text" style="' + scope.pctDef.Style + '" id="' + scope.pctDef.FieldInternalName + '" name="' + scope.pctDef.FieldInternalName +
                           '" data-ng-model="' + scope.pctDef.NgModel + '" data-ng-required="true" required /><br /><span class="fieldDesc">' +
                            scope.pctDef.Description + '</span>';
            break;
        case 'DropDownTemplateControl':
            ngModelController.$formatters.push(function ($modelValue) {
                var newvar = parseInt(val, 10);
                return newvar;
            });
            templatetext = '<select style="' + scope.pctDef.Style + '" id="id' + scope.pctDef.FieldInternalName + '" name="' + scope.pctDef.FieldInternalName +
                           '" data-ng-model="' + scope.pctDef.NgModel + '" data-ng-options="' + scope.pctDef.NgOptions + '" data-ng-required=""><option selected="selected" value="">Select...</option></select><input type="hidden" value="{{ ' + scope.pctDef.NgModel + '}}"  />';
            break;
        }

        element.html(templatetext);
        $compile(element.contents())(scope);
    }

    return {
        restrict: "A",
        link: linker,
        require: 'ngModel',
        scope: {
            pctDef: '=',
            moduleData: '=',
            itemData: '='
        }
    };
}]);

在HTML文件中调用该指令，就像这样

需要绑定的所有数据都在范围变量itemData中传递，因为itemData是值的对象，对象的属性名称（itemData）需要与select控件的数据绑定通过范围变量pctDef传递。不要说文本框需要填充值"Mike"，然后应将此值传递给范围变量itemData。假设该值位于itemData属性"Name"中，因此ng-model看起来像ng-model="itemData.Name"。现在，此范围变量名称itemData.Name来自数据库。数据库将angular JS作为变量itemData.Name的名称传递给字符串变量。那个字符串变量是scope.pctDef.NgModel。因此，scope.pctDef.NgModel是一个字符串属性，它包含字符串值itemData.Name，itemData.Name是需要数据绑定的范围对象的名称。这对于文本框非常有效，而不是当它是下拉列表时。为了交叉检查我已经在select控件旁边放置了一个隐藏控件并使用相同的对象进行数据绑定，隐藏控件通过angular而不是select控件将数据绑定到正确的值。

选择标记数据绑定AnjularJS中的问题

0 个答案: