Question

我有一个AngularJS应用程序，在服务层中有一些复杂的应用程序逻辑。

根据输入，应用一些计算并在计算之后：

某些字段现在可能有或没有有效值（验证字段值内容）。
现在可能需要或可能不需要某些字段（需要更改为true）。

为了解决这个问题，我计划使用UI Validate将一个函数从Parent组件传递给Children组件。

但是，由于UI Validate函数需要在子组件的本地$ scope中定义，我们如何才能实现父级子行为？

版本

Angular：1.6.7
UI验证：1.2.3

来自UI Validate页面的

Snippet：

<!DOCTYPE html>
<html lang="en" ng-app="demo">

<head>
  <meta charset="utf-8">
  <title>AngularJS ui-validate</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.js"></script>
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" />

  <!-- ui-validate files -->
  <script src="https://raw.githubusercontent.com/angular-ui/ui-validate/master/dist/validate.min.js"></script>
</head>

<body class="container">
  <script>
    var app = angular.module('demo', ['ui.validate']);
    app.controller('ValidateCtrl', function($scope) {
      $scope.notBlackListed = function(value) {
        var blacklist = ['bad@domain.com', 'verybad@domain.com'];
        return blacklist.indexOf(value) === -1;
      };
    });
  </script>
  <section id="validate" ng-controller="ValidateCtrl">
    <div class="page-header">
      <h1>Validate</h1>
    </div>

    <form name="form">
      <h3>e-mail</h3>
      <input class="form-control" name="email" placeholder="try john.doe@mail.com or bad@domain.com" type="email" required ng-model="email" ng-model-options="{ debounce: 100 }" ui-validate="{blacklist: 'notBlackListed($value)'}" ui-validate-async="{alreadyExists: 'doesNotExist($modelValue)'}"
      />
      <span ng-show='form.email.$error.blacklist'>This e-mail is black-listed!</span>
    </form>

  </section>
</body>

</html>

AngularJS - UI验证 - 从父组件传递自定义验证功能

0 个答案: