Question

我想创建一个指令，为每个输入字段创建一个自动生成的ngModel，并在每个输入字段下面a具有与上面元素的ngModel绑定的ng-so，所以这里是我这样做的指令

  app.directive('cmsInput', function() {
    return {
        restrict: 'E',
        compile: function(element, attrs)
        {
            var type = attrs.type || 'text';
            var required = attrs.hasOwnProperty('required') ? "required='required'" : "";
            var htmlText = '<div class="form-group"  ng-controller="DashboardController">' +
                '<label class="col-sm-2 control-label" for="' + attrs.formId + '">' + attrs.label + '</label>' +
                    '<div class="col-sm-10">' +
                    '<input ng-model="content.'+attrs.formId +'" type="' + type + '" class="form-control" id="' + attrs.formId + '" name="' + attrs.formId + '" ' + required + '>' +
                    '<span ng-bind="content.'+attrs.formId+'"></span></div>' +
                '</div>';
            element.replaceWith(htmlText);
        }
    }
})

所以这个方向给了我输入元素，但ngBind不起作用。

这里是html

<!doctype html>
<html lang="en">
<head>
<title>Test Title</title>
</head>


<body>
<cms-input label="Email address" form-id="emailAddress" type="email" required /></cms-input>

<cms-input label="Name" form-id="name" type="text"/></cms-input>

<cms-input label="Header" form-id="header" type="text"/></cms-input>

<cms-input label="Password" form-id="password" type="password"/></cms-input>


</body>

</html>

Answer 1

我在这里看到了一些东西，但唯一真正导致问题的是没有将$ scope.content初始化为一个对象。您可以在此处查看一个有效的示例：http://jsbin.com/bocuzi/1/edit?html,js,output

另一件可能让您失望的事情是，如果您使用电子邮件字段进行全面测试，而不是放入有效的电子邮件地址。由于ngModelController的工作方式，除非通过验证，否则它实际上不会设置$ scope值。其他任何字段都不会有这种限制，因为他们使用的是文本或密码类型。

希望有所帮助。

使用自定义指令动态ngModel和ngBind

1 个答案: