如何从 angularjs 指令中获取对封闭表单元素的引用

How can I get a reference to the enclosing form element from within an angularjs directive?

本文关键字：表单 元素 引用 获取 angularjs 指令      更新时间：2023-09-26

我有以下 HTML：

<form name="my-form">
  <div class="col-sm-4">
    <input type="phone" name="mobileNumber" ng-model="form.mobileNumber" value="0439888999" required>
  </div>
</form>

以及指令中的以下代码：

angular.module('myApp.directives')
    .directive('required', function ($compile) {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function(scope, element, attr, ngModel) {
                var formName = element.parents('form').attr('name');
                var fieldName = element.attr('name');
            }
     };
});

但是当我运行我的单元测试时，我收到错误：TypeError: Object [object Object] has no method 'parents'.

我知道这是因为与我的 AngularJS 版本 （v1.2.13） 打包的 jqLite 不支持父母方法。

我的问题是，如何在指令中实现相同的功能？我是否需要使用 jQuery，如果是，如何将其作为依赖项注入我的指令和单元测试中？

将

parents替换为parent应该可以;)

var formName = element.parent('form').attr('name');

jQlite 的可用方法列表：

http://docs.angularjs.org/api/ng/function/angular.element

如果您只想测试表单的有效性（需要电话），则不需要自定义指令。只需使用此代码：

  <body ng-controller="MainCtrl">
    <form name="xform">
      <div class="col-sm-4">
        <input test type="phone" name="phone" ng-model="data.phone" required>
      </div>
      <p ng-if="xform.$valid">Valid</p>
      <p ng-if="!xform.$valid">Not valid</p>
    </form>
  </body>

如果仍需要访问自定义指令中的模型和窗体，则应在指令中使用 require 来访问模型和窗体控制器。这应该给你一个解决问题的方向：

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.data = {};
  $scope.data.phone = '031 584 658';
});
app.directive("test", function(){
  return {
    controller: function($scope) {
      $scope.$watch('xform.$valid', function(newVal, oldVal) {
        console.log('form validity has changed', newVal, oldVal);
      })
    },
    link: function(scope,element,attrs,controllers) {
      var model = controllers[0];
      var form = controllers[1];
      //console.log(model);
      //console.log(form);
      //console.log(form.$valid);
    },
    require: ['ngModel', '^form'],
  }
})

这是一个工作弹道。

相关文章：