Angularjs ngModel在指令中不绑定

我正在创建一个指令来概括控制来自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>'
    };
});

csapp.directive（“textInput”，函数（）{ 返回{ 范围：{ 详情：“=”， ngModel:“=” }, 限制：'E'， 模板：“”+ '' + '' }; }); 其中，作为父指令的代码如下所示：

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>'
    };
});

csapp.directive（“inputDisplay”，函数（）{ 返回{ 范围：{ 标签：“@”， 类别：“@”， 必需：“@” }, 是的， 限制：'E'， 模板：“”+ “{label | |“Text”}{{required.toString（）===“true”？“*：”}”+ '' + '' + '' + '' }; }); 如果我使用一个指令并合并两个指令的模板，那么绑定就可以工作，但是如果我对布局和输入使用单独的指令，那么绑定就不能工作

---

我试过使用点运算符ngModel，但它仍然不起作用。

您应该使用ngModel控制器

请参见此处的演示：

myApp.directive（“textInput”，function（））{
返回{
范围：{
详情：'='
},
要求：'ngModel'，
限制：'E'，
模板：“”+
'' +
'',
链接：功能（范围、元素、属性、模型）{
var input=angular.element（元素[0]。querySelector（'input'）；
input.bind（“输入”，函数（e）{
作用域$apply（函数（）{
ngModel.$setViewValue（即目标值）；
});
});
范围$watch（函数（）{
返回ngModel.$modelValue；
}，函数（模型值）{
input.val（modelValue）；
});
}
};
});

''+
'' +
''

---

输入显示转包您的输入，您应该将其用作输入is指令的控制器输入显示控制器。

您能用相关代码设置一个插入器吗？这是因为您正在范围中的范围中创建一个范围。也就是说控制器>文本输入指令>输入显示指令。这就引出了我的下一个观点，莱昂纳多·迪卡普里奥可能会开始侵入你的梦想，所以请小心。你能举个例子详细说明一下吗，我无法理解你的观点：（.btw，感谢您的回复。只需在textInput指令的模板中添加details=details，而inputDisplay指令作用域中的details:“=”没有details变量，您应该提供它，因为transclude在编译它的地方使用指令的$scope