Question

我正在创建指令来概括控制从javascript输入的数据。

所以我将文本字段的选项指定为：

$scope.textfield = { name:"abcd", label: "abcd", placeholder: "xyz", required: true };

和指令：

<text-input details="textfield" ng-model="abc.variable"></text-input>

指令代码如下所示：

csapp.directive("textInput", function () {
    return {
        scope: {
            details: '=',
            ngModel: '='
        },
        restrict: 'E',
        template: '<input-display label="{{details.label}}" class="{{details.class}}" required="{{details.required}}">' +
                        '<input type="text" name={{details.name}} placeholder="{{details.placeholder}}" ng-required="{{details.required}}" data-ng-model="ngModel"/>' +
                    '</input-display>'

    };
});

其中父指令代码如下：

csapp.directive("inputDisplay", function () {
    return {
        scope: {
            label: '@',
            class: '@',
            required: '@'
        },
        transclude: true,
        restrict: 'E',
        template: '<div class="control-group" class="{{class}}">' +
                        '<div class="control-label">{{label || "Text"}} {{ required.toString() === "true" ? "*" : ""}}' +
                        '</div>' +
                        '<div class="controls" ng-transclude>' +
                        '</div>' +
                    '</div>'
    };
});

如果我使用单个指令并合并两个指令的模板绑定有效，但如果我使用单独的指令进行布局和输入，则它不起作用。

我曾尝试使用点运算符ngModel，但它仍无效。

Answer 1

您应该使用ngModel Controller。

请参阅此处的演示： http://plnkr.co/edit/TULG36?p=preview

myApp.directive("textInput", function() {
    return {
        scope: {
            details: '='                
        },
        require: 'ngModel',
        restrict: 'E',
        template: '<input-display label="{{details.label}}" class="{{details.class}}" required="{{details.required}}">' +
            '<input type="text" name={{details.name}} placeholder="{{details.placeholder}}" ng-required="{{details.required}}"/>' +
            '</input-display>',
        link: function(scope, element, attrs, ngModel){
            var input = angular.element(element[0].querySelector('input'));
            input.bind("input", function(e) {
                scope.$apply(function() {
                   ngModel.$setViewValue(e.target.value);
                });
            });

            scope.$watch(function(){
                return ngModel.$modelValue;
            }, function(modelValue){
                input.val(modelValue);
            });
        }

    };
});

Answer 2

'<input-display label="{{details.label}}" class="{{details.class}}" required="{{details.required}}">' +
                    '<input type="text" name={{details.name}} placeholder="{{details.placeholder}}" ng-required="{{details.required}}" data-ng-model="ngModel"/>' +
                '</input-display>'

输入显示转换输入，你应该使用它作为输入的控制器是指令输入显示控制器。

ngModel在指令中没有绑定

2 个答案: