4

我正在创建一个my-validate看起来像这样的指令

<input my-validate="customValidation" ng-model="model" />

我想要做的是像这样将一个sybling元素附加到指令中

错误模板：

<ul class"errors">
   <li ng-repeat="for error in errors">{{error}} not valid</li>
</ul>

errors在指令的范围内定义。

我在compile函数中添加了错误模板，但我遇到的问题是scope链接函数中的与附加模板不一样。

这里有一个 plunker 来说明这个问题：http ://plnkr.co/edit/ghdtdYruQaaO0Yxxlrt1?p=preview

在指令模板中可以看到“world”，但在添加的元素 :S 上没有。

4

3 回答 3

6

那是因为您的 div "2 hello" 在您的范围可见的容器之外。您可以使用element.append()而不是element.after()使范围可用。

指示

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


app.directive('myValidate', function($compile) {
      return {
        template: '<span>1. Hello {{world}}  my scope is {{$id}} (parent: {{$parent.$id}})<span/>',
        replace: true,
        restrict: 'A',
        scope: true,
        compile: function (element) {

          element.append('<div>2. Hello {{ world }}, my scope is {{$id}} (parent: {{$parent.$id}})</div>');

          return function(scope) {
            scope.world = 'World';
            //$compile()(scope);
          };
        }
      };
});

HTML

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body>
    <input my-validate="" />
  </body>

</html>

http://plnkr.co/edit/dU3holBCePKe0ZAwQKh1?p=preview

于 2013-06-05T14:25:52.030 回答
1

我正在阅读并检查示例，因为我在相同的情况下显示验证消息，但在输入字段下，并且消息可以根据需要的验证类型进行更改。

所以我想出了这个解决方案

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

app.controller('ctrl', function($scope, CONSTANTS) {
  $scope.title = "title";
  $scope.CONSTANTS = CONSTANTS;
});

app.constant('CONSTANTS', {
  LENGHT_1: 3,
  LENGHT_2: 4
});

app.directive('dir', function($compile) {
  return {
    scope: true,
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, elem, attrs, ngModel) {
      scope.maxLength = false;
      scope.required = false;
      scope.max = scope.$eval(attrs['ngMaxlength']);
      var tpl = '<div ng-if="maxLength" ng-include="\'length.tpl.html\'"></div>' +
        '<div ng-if="required" ng-include="\'required.tpl.html\'"></div>';
      var el = $compile(tpl)(scope);
      elem.after(el);

      scope.$watch(attrs['ngModel'], function(newValue, oldValue, scope) {
        if (ngModel.$error !== null && ngModel.$error.maxlength) {
          scope.maxLength = true;
        } else {
          scope.maxLength = false;
        }

        if (ngModel.$error !== null && ngModel.$error.required && ngModel.$dirty) {
          scope.required = true;
        } else {
          scope.required = false;
        }
      });
    }
  }
});
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
  
  <script type="text/ng-template" id="length.tpl.html">
    max length {{max}}
  </script>
  <script type="text/ng-template" id="required.tpl.html">
    required
  </script>
</head>

<body ng-controller="ctrl">
  <h1>Input Validation</h1> {{title}}
  <br><br>
  <form name="form" novalidate>
    <input dir name="input_one" ng-model="bar" ng-maxlength="CONSTANTS.LENGHT_1" required>
    <br>
    input one: {{form.input_one.$error}}
    <br>
    <br>
    <input dir name="input_two" ng-model="foo" ng-maxlength="CONSTANTS.LENGHT_2">
  </form>
  <br>
  input two: {{form.input_two.$error}}
</body>

</html>

在 Plunkr 上

希望能帮助到你。

于 2015-11-17T13:12:03.283 回答
-1

我认为您通过使用表单错误来切换显示处于正确的轨道上。这正是标准 Angular 文档中推荐的方式。

但是，如果您想为单个输入显示多个错误，甚至可能从那里控制错误消息，我建议您使用服务，例如在http://plnkr.co/edit/iNcNs2ErrOnYf9I7whdu? p=预览。

现在，每个令牌可以有一条消息，但每个输入可以有任意多的令牌。如果您希望每个令牌多条消息，只需使用消息数组而不是单个字符串值（注意，使用该方法 unset 确实变得更加复杂）。

希望有帮助，亚历克斯

于 2013-10-09T16:51:10.360 回答