如何从angularjs指令中获取对封闭式表单元素的引用？
[英]How can I get a reference to the enclosing form element from within an angularjs directive?
问题描述
I have the following HTML: 
我有以下HTML：
<form name="my-form">
<div class="col-sm-4">
<input type="phone" name="mobileNumber" ng-model="form.mobileNumber" value="0439888999" required>
</div>
</form>
And the following code in a directive: 以及指令中的以下代码：
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');
}
};
});
but when I run my unit test, I get the error: TypeError: Object [object Object] has no method 'parents' . 但是当我运行单元测试时，出现错误： TypeError: Object [object Object] has no method 'parents' 。
I know this is because jqLite that is packaged with my version of AngularJS (v1.2.13) doesn't support the parents method. 我知道这是因为与我的AngularJS（v1.2.13）版本一起打包的jqLite不支持parent方法。
My question is, how can I implement this same functionality inside my directive? 我的问题是，如何在指令中实现相同的功能？ Do I need to use jQuery and if so, how do I inject it as a dependency into my directive and unit test? 我是否需要使用jQuery，如果需要，如何将它作为依赖项注入我的指令和单元测试中？
2 个解决方案
解决方案1
1 已采纳 2014-04-04 06:06:03
Replace parents by parent should work ;) 由parent代替parents应该工作;）
var formName = element.parent('form').attr('name');
List of availables methods with jQlite: jQlite的可用方法列表：
http://docs.angularjs.org/api/ng/function/angular.element http://docs.angularjs.org/api/ng/function/angular.element
解决方案2
0 2014-04-05 00:01:50
If you just want to test the validity of the form (phone is required), you don't need a custom directive. 如果只想测试表单的有效性（需要电话），则不需要自定义指令。 Just use this code: 只需使用以下代码：
<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>
If you still need to access the model and the form in a custom directive, you should use require in the directive to get access to the model and form controller. 如果仍然需要在自定义指令中访问模型和表单，则应在指令中使用require来访问模型和表单控制器。 This should give you a direction how to solve your problem: 这应该为您提供指导以解决您的问题：
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'],
}
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.