AngularJS多次使用同一指令元素（验证错误）

我准备了一个表单，在一个表单中有两个指令元素。 但是第一个验证不起作用，第二个验证错误出现在两个指令元素上

我如何克服这个问题？ plunk项目位于下面给定的链接上

index.html inputEmailCtrl

---

感谢您的回答。

基于您的Plunk，我做了一些可以帮助您的更改

index.html

...
scope: {
          varModel: '=ngModel',
          varName: '@name'
        },

        link: function (scope, element, attrs, ctrls) {
            scope.form = ctrls[0];
            var ngModel = ctrls[1];

            if (attrs.required !== undefined) {
                // If attribute required exists
                // ng-required takes a boolean
                scope.required = true;
            }

            scope.$watch(scope.varModel, function () {
                ngModel.$setViewValue(scope.varModel);
            });
...

---

希望这有帮助

如果有人遇到同样的问题，请在这里写下：

我在一个遗留项目中工作，目前正在将AngularJS版本从1.3.x更新到1.8.x。突然，使用具有相同指令属性的多个元素不再有效。所有元素中只有一个显示出来，其余元素神奇地消失了，没有任何错误消息或其他痕迹

我有三个元素在使用指令：

<div select-person person="one"></div>

<div select-person person="two"></div>

<div select-person person="three"></div>

问题是只显示了使用指令的一个元素。在阅读了StackOverflow的每一页以及完整的AngularJS文档之后，我尝试了指令中所有可能的更改，因为我认为范围隔离存在问题

在头痛了几天后，我终于解决了我的问题：

我在directive元素上有一个自封闭的HTML标记，而不是“正常”关闭它：

---

在此之后，我的代码神奇地重新开始正常工作。

但解决方案还有一个问题：（写入时必须有一个验证错误，但在一个控件中可以看到这两个错误。同时可以看到有效的电子邮件格式错误和所需的错误验证。）（大家好，我从input-email.html中删除了所需的部分，然后工作了。但是！form.{{varName}}。dirty不工作：(

'use strict';

app.directive('inputEmail', function () {
    return {
        restrict: 'E',
        templateUrl: 'input-email.html',
        replace: false,
        controller: 'InputEmailCtrl',
        require: ['^form', 'ngModel'],

        // See Isolating the Scope of a Directive http://docs.angularjs.org/guide/directive#isolating-the-scope-of-a-directive
        scope: {},

        link: function (scope, element, attrs, ctrls) {
            scope.form = ctrls[0];
            var ngModel = ctrls[1];

            if (attrs.required !== undefined) {
                // If attribute required exists
                // ng-required takes a boolean
                scope.required = true;
            }

            scope.$watch('email', function () {
                ngModel.$setViewValue(scope.email);
            });
        }
    };
});

'use strict';

app.controller('InputEmailCtrl', ['$scope', function ($scope) {
}]);

<input-email name='email1' ng-model="person.email1" required></input-email>
<input-email name='email2' ng-model="person.email2" required></input-email>

<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-4" ng-class="{'has-error': !form.{{varName}}.dirty && form.{{varName}}.$invalid}">
      <input type="email" name="varName" ng-model="varModel" class="form-control" required>

      <span ng-show="form.{{varName}}.$error.required" class="help-block">Can't be blank</span>
      <span ng-show="form.{{varName}}.$modelValue == undefined" class="help-block">Not a valid email</span>
</div>

...
scope: {
          varModel: '=ngModel',
          varName: '@name'
        },

        link: function (scope, element, attrs, ctrls) {
            scope.form = ctrls[0];
            var ngModel = ctrls[1];

            if (attrs.required !== undefined) {
                // If attribute required exists
                // ng-required takes a boolean
                scope.required = true;
            }

            scope.$watch(scope.varModel, function () {
                ngModel.$setViewValue(scope.varModel);
            });
...

<div select-person person="one" />

<div select-person person="two" />

<div select-person person="three" />

  angular
    .module('demo')
    .directive('selectPerson', ['customSettings', selectDirective]);

  function selectPersonDirective(customSettings) {
    return {
      templateUrl: "Directives/SelectDirective",
      scope: {
        person: '@'
      },
      bindToController: true,
      controller: selectCtrl,
      controllerAs: 'ctrl'
    };

function selectCtrl() {
   ...
}

<div select-person person="one"></div>

<div select-person person="two"></div>

<div select-person person="three"></div>