我正在尝试创建一个代理指令，如下所示:
<x-field x-purpose="choice" x-values="data.countries" ng-model="model.country"/>
其中 field 指令将其转发到另一个指令，导致以下替换:
<x-choiceField x-values="data.countries" ng-model="model.country"/>
[注意:] ng-model 可以替换为对某些新的隔离范围的引用。
“字段目的”指令根据有多少个值可供选择、客户端设备大小等来决定使用哪种实现(例如下拉/列表框/自动完成？) - 最终结果如下:
<select ng-model="model.country" ng-options="data.countries">
这个设计很大程度上是出于好奇，而不是出于任何实际原因，我感兴趣的是如何实现它，而不是从性能/简单性的 Angular 来看它是否实际上是一个好主意......
阅读后[ https://stackoverflow.com/a/18895441/1156377] ，我有这样的东西:
function proxyDirective($injector, $parse, element) {
return function (scope, element, attrs) {
var target = element.camelCase(attrs.name + '-field');
var model = attrs.ngModel;
var value = $parse(model);
var directive = $injector.get(target);
/* Bind ngModel to new isolated scope "value" property */
scope.$watch(model, function () {
???
});
/* Generate new directive element */
var pElement = angular.element.html('');
var pAttrs = {
value: ???
};
/* Forward to new directive */
return directive.compile(element, attrs, null)(scope, element, attrs);
};
}
function alphaFieldDirective() {
return {
replace: 'true',
template: '<input type="text" ng-value="forwarded value?">'
};
}
function betaFieldDirective() {
return {
replace: 'true',
template: '<textarea attributes? >{{ value }}</textarea>'
};
}
但我不知道如何实现转发或绑定(bind)。这是我第一次研究 Angular 指令，它似乎并不是一种特别流行的使用方式!
这样做的目的是将表单字段的用途与其外观/实现分开，并为实例化字段提供一个简单的指令。
最佳答案
我通过代理指令的服务实现了这个:
fiddle :http://jsfiddle.net/HB7LU/7779/
HTML:
<body ng-app="myApp">
<h1>Directive proxying</h1>
<proxy target="bold" text="Bold text"></proxy>
<h1>Attribute forwarding</h1>
<proxy target="italic" style="color: red;" text="Red, italic text"></proxy>
</body>
Javascript:
angular.module('myApp', [])
.factory('directiveProxyService', directiveProxyService)
.directive('proxy', dirProxy)
.directive('bold', boldDirective)
.directive('italic', italicDirective)
;
function directiveProxyService($compile) {
return function (target, scope, element, attrs, ignoreAttrs) {
var forward = angular.element('<' + target + '/>');
/* Move attributes over */
_(attrs).chain()
.omit(ignoreAttrs || [])
.omit('class', 'id')
.omit(function (val, key) { return key.charAt(0) === '$'; })
.each(function (val, key) {
element.removeAttr(attrs.$attr[key]);
forward.attr(attrs.$attr[key], val);
});
$compile(forward)(scope);
element.append(forward);
return forward;
};
}
function dirProxy(directiveProxyService) {
return {
restrict: 'E',
terminal: true,
priority: 1000000,
replace: true,
template: '<span></span>',
link: function (scope, element, attrs) {
directiveProxyService(attrs.target, scope, element, attrs, ['target']);
}
};
}
function boldDirective() {
return {
restrict: 'E',
replace: true,
template: '<i>{{ text }}</i>',
scope: { text: '@' }
};
}
function italicDirective() {
return {
restrict: 'E',
replace: true,
template: '<i>{{ text }}</i>',
scope: { text: '@' }
};
}
关于AngularJS 代理指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26626508/