3

我正在处理表单输入指令。
http://jsfiddle.net/TR9Qt/1/

<form name="form">
<ng-form-field label="Email validation NOT working"></ng-form-field>
<label for="test_email">Test Email with working validation</label>
<input type="email" name="test_email"
ng-model="formData.testEmail" placeholder="Email" required />
<div class="error-message" ng-show="form.test_email.$dirty && form.test_email.$invalid"> <span ng-show="form.test_email.$error.required">Tell us your email.</span>

    <span
    ng-show="form.test_email.$error.email">This is not a valid email.</span>
</div>


var myApp = angular.module('myApp', []);

myApp.directive('ngFormField', function ($compile) {
var labelTemplate = '<label for="user_email">{{label}}</label>';
var inputTemplate = '<input type="email" name="user_email" ng-model="formData.email" placeholder="Email" required />' +

    '<div class="error-message" ng-show="form.user_email.$dirty && form.user_email.$invalid">' +
    '<span ng-show="form.user_email.$error.required">Tell us your email.</span>' +
    '<span ng-show="form.user_email.$error.email">This is not a valid email.</span>' +
    '</div>';


return {
    transclude: true,
    scope: {
        label: '@'
    },
    // append
    replace: true,
    // attribute restriction
    restrict: 'E',
    controller: function ($scope, $element, $attrs) {},
    // linking method
    link: function ($scope, element, attrs) {
        element.html(labelTemplate + inputTemplate);

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

});

当我将它放入指令时，为什么表单不会验证？

谢谢，
三通

4

2 回答 2

1

聚会有点晚了，但是您遇到的问题是您在尝试编译时使用了隔离范围。隔离范围不直接从父级继承，但仍可通过 $parent 获得。我通过将标签属性值附加到当前范围解决了您的问题；这可能不是您想要的，但它可以解决您的直接问题。

var myApp = angular.module('myApp', []);

myApp.directive('ngFormField', function ($compile) {
    var labelTemplate = '{{label}}';
    var inputTemplate = '' +

        '' +
        “告诉我们你的电子邮件。” +
        “这不是一封有效的电子邮件。” +
        '';
    返回 {
        // 追加
        替换：真，
        // 属性限制
        限制：'E'，
        //链接方法
        链接：函数（$范围，元素，属性）{
            $scope.label = attrs.label;
            element.html(labelTemplate + inputTemplate);
            $compile(element.contents())($scope);
        }
    };
});

工作的笨蛋

于 2013-09-21T01:30:45.447 回答
1

我还不是指令专家，但我突然想到了两件事：

  1. 除非在 ng-repeat 中使用它，否则您实际上并不需要编译您的指令。

  2. 您的指令与标签而不是表单字段相关联。

    <input 
    ng-form-field
    type="email" 
    name="test_email"
    ng-model="formData.testEmail" 
    placeholder="Email" 
    required />

http://jsfiddle.net/sharondio/c8hwj/

于 2013-02-14T18:16:16.893 回答