Angularjs:当控制基于指令时验证不起作用

Question

作为 Angularjs 的新手，我正在使用指令在 Angularjs 中创建文本框标签组合。它运行得很好，但是我无法进行验证。这是一个精简的示例。

HTML:

<form name="form" novalidate ng-app="myapp">
<input type="text" name="myfield" ng-model="myfield" required />{{myfield}}
<span ng-show="form.myfield.$error.required">ERROR MSG WORKING</span> 
<br>
<div mydirective FIELD="myfield2" />
</form>

Javascript:

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

myapp.directive('mydirective', function () {
    return {
        restrict: 'A',
        scope: { ngModel: '=' },
        template: '<input type="text" name="FIELD" ng-model="FIELD" />{{FIELD}}
        <span ng-show="form.FIELD.$error.required">ERROR MSG NOT WORKING</span>'
    };
});

硬编码输入 - myfield - 有效，另一个 - myfield2 - 无效(绑定(bind)有效，只是不是必需的错误消息)。

如何告诉 ng-show 属性将 form.FIELD.$error.required 中的 FIELD 替换为 myfield2>?

这是一个jsFiddle .

Answer 1

问题是您的指令为指令创建了一个新的作用域，这个新作用域无法访问父作用域中的表单对象。

我想出了两种解决方案，尽管我怀疑有一种更优雅的“Angular”方式来做到这一点:

传递表单对象

您的 View 变为:

<div mydirective FIELD="myfield2" form="form" />

以及范围定义对象:

return {
    restrict: 'A',
    scope: {
        ngModel: '=',
        form: '='
    },
    template: '<input type="text" name="FIELD" ng-model="FIELD" required/>{{FIELD}}<span ng-show="form.FIELD.$error.required">ERROR MSG NOT WORKING</span>'
};

我已经用以下代码更新了 fiddle :http://jsfiddle.net/pTapw/4/

使用 Controller

return {
    restrict: 'A',
    controller: function($scope){
        $scope.form = $scope.$parent.form;   
    },
    scope: {
        ngModel: '='
    },
    template: '<input type="text" name="FIELD" ng-model="FIELD" required/>{{FIELD}}<span ng-show="form.FIELD.$error.required">ERROR MSG NOT WORKING</span>'
};