对传递给指令 AngularJS 的表单不起作用答案

【问题标题】：Doesn't work validation on form passed to directive AngularJS对传递给指令 AngularJS 的表单不起作用
【发布时间】：2014-09-02 02:26:09
【问题描述】：

我正在使用 AngularJS 构建一个 Web 应用程序，但我有一个疑问，因为我不知道实现使用输入表单的指令的最佳方法是什么。我有以下指令：

angular.module('myApp').directive('personal', [function () {
    return {        
        restrict: 'E',
        scope : {
            model : '=ngModel',
            label : '@',
        },
        require: '^form',
        templateUrl : 'personal.html',
        link: function (scope, iElement, iAttrs, ngModelController) {}
    };
}]);

personal.html

<input type="text" name="name{{label}}" ng-model="model.name" ng-pattern="/^[A-Za-z]*$/">
<div class="error-container" ng-show="data.name{{label}}.$invalid">
    <small class="error" ng-show="data.name{{label}}.$error.pattern">Invalid format</small>
</div>

index.html

....
<form novalidate name="data">
   <personal label="personal" ng-model="general"></personal>
  <!-- here I will need add more tags 'personal' ..is a requirement -->
</form>
...

表格呈现得很好。但是.. 当输入名称{{label}} 的内容无效时，不显示错误消息（如果我将 templateUrl 内容放在 index.html 上，则可以）。

感谢您的提前。

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

templateUrl 中的data.whatever 无权访问表单控制器。您已经创建了一个隔离范围，因此它无法访问表单名称 = 数据。我现在不在我的电脑前，所以我不能给你可靠的例子，但请阅读表单控制器。

【讨论】：

嗨，马克。感谢您的回答，我隔离了范围，因为我需要创建许多“个人”标签，并且每个标签都必须在输入时使用不同的名称，为此我将名称与 {{label}} (name="name{{label }}”）。还有另一种形式可以做到这一点吗？感谢您的提前。