【发布时间】:2014-06-23 03:54:00
【问题描述】:
通常在指令中,如果我想将范围传递给它,我会使用require: 'ngModel'。这工作正常。但我现在正在创建一个指令,该指令创建 5 个不同的 HTML 元素,每个元素都具有从父级传递的不同 ngModel。需要作为属性传递的 ngmodel 是 ngModel1, ngModel2, ngModel3, ngModel4, ngModel5。如何在指令内的require 条件中添加多个选项?
我试过这些,但它不起作用:
require: ['ngModel1', 'ngModel2', 'ngModel3', 'ngModel4', 'ngModel5'],
和
require: {'ngModel1', 'ngModel2', 'ngModel3', 'ngModel4', 'ngModel5'},
和
require: 'ngModel1', 'ngModel2', 'ngModel3', 'ngModel4', 'ngModel5',
和
require: 'ngModel1, ngModel2, ngModel3, ngModel4, ngModel5'},
如何添加多个 require 选项?
编辑:
HTML 代码:
<div get-vehicles-checkbox
cars-ng-model="formData.cars"
bikes-ng-model="formData.bikes"
trucks-ng-model="formData.trucks"
van-ng-model="formData.van"
bus-ng-model="formData.bus"
></div>
指令:
app.directive('getVehiclesCheckbox', function($compile) {
return {
restrict: 'A',
replace:true,
// require: ?
scope: {
carsNgModel: '=',
bikesNgModel: '=',
trucksNgModel: '=',
vanNgModel: '=',
busNgModel: '='
},
controller: 'SomeController',
link: function(scope, element, attrs, carsNgModel, bikesNgModel, trucksNgModel, vanNgModel, busNgModel) {
scope.carsNgModel = {},
scope.bikesNgModel = {},
scope.trucksNgModel = {},
scope.vanNgModel = {},
scope.busNgModel = {}
var html = '<span ng-repeat="car in cars">' +
'<input type="checkbox" ng-model="carsNgModel[car.code]"> {{ car.number }} {{ car.description }}' +
'</span>' +
'<span ng-repeat="bike in bikes">' +
'<input type="checkbox" ng-model="bikesNgModel[bike.code]"> {{ bike.number }} {{ bike.description }}' +
'</span>';
//.... etc.. etc.....
// COMPILE HTML
//... .... ...
}
}
});
【问题讨论】:
-
文档说:
require: ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent'] -
等等,你能给我们看看你的 html 吗?我感觉你没有以正确的方式使用它。
-
谢谢@JoseM 我在上面的问题中添加了一个示例 html 和指令代码。我知道对我来说另一种方法是为每辆车设置单独的指令,但我希望全部合二为一以避免冗余。
-
require选项不提供范围访问;它提供对其他指令控制器的访问。由于您似乎将所有内容都包含在一个指令中,因此这里似乎没有必要。 -
虽然您误解了使用require功能的原因,但您的问题仍然有效。我有需要访问多个指令控制器方法的情况。我可以使用 require 从父指令访问方法,如下所示:'require:"^parentDirective"' 但我还需要访问单独指令中的方法,文档说要使用这样的字符串数组:'require :["^parentDirective","directiveTwo"]' 但是这样做会导致错误,尽管这两个指令都已编译到 DOM。我在这里错过了什么吗?
标签: javascript angularjs angularjs-directive angularjs-scope angular-directive