Question

我有以下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不支持parents方法。

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

Answer 1

parents替换parent应该有效;）

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

jQlite的可用方法列表：

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

Answer 2

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

  <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'],
  }
})

这是一个有效的plunker。

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

2 个答案: