为模板中的元素分配指令属性 [英] Assign directive attributes to an element in template
问题描述
我有一个指令应该让我的选择更有趣:
angular.module('myDeadLine').directive('dcSelect', function () {返回 {限制:'E',范围: {标签: '@',ngModel: '=',ngOptions: '=',...},转置:真实,templateUrl: '/web/_utils/dcselect/dcselect.html'};});
使用模板:
<select class="form-control"ng-focus="dcSelectFocused=true"ng-blur="dcSelectFocused=false"><option value="">{{label}}</option></选择><i class="fa fa-arrow-down" ng-class="{'open': dcSelectFocused }"></i>
将所有与选择相关的属性分配给选择标签的最简单方法是什么,以便我可以像这样使用它:
是否有一种自动化的方式可以将所有属性转移到标签"之外的选择,并使它们起作用?
这是有效的方案,但来自 Angular 的阻力并没有使它成为一项微不足道的任务.通常 replace: true
用于将所有属性传递给子模板元素.但是 select
不是直系后代,也不是选项.
另一种可能是将 terminal: true
与高 priority
结合使用,因为 ng-model
, ng-options
和任何其他属性指令不应在 dc-select
元素上编译.但是 terminal: true
也会使绑定停止工作(在这种情况下,它们必须手动插入).
我想最简单的方法是
.directive('dcSelect', function ($compile) {返回 {限制:'E',范围: {标签: '@',dcNgModel: '=',dcNgOptions: '='},转置:真实,templateUrl: '/web/_utils/dcselect/dcselect.html',链接:函数(范围、元素、属性){var select = element.find('select');angular.forEach(attrs.$attr, function (name, normalizedName) {if (!name.match(/^dc-/)) 返回;var val = scope.hasOwnProperty(normalizedName) ?normalizedName : element.attr(name);select.attr(name.replace(/^dc-/, ''), val);});$编译(选择)(范围);}};});
I have a directive which is supposed to make my select a little fancier:
angular.module('myDeadLine')
.directive('dcSelect', function () {
return {
restrict: 'E',
scope: {
label: '@',
ngModel: '=',
ngOptions: '=',...
},
transclude: true,
templateUrl: '/web/_utils/dcselect/dcselect.html'
};
});
with the template:
<div class="form-group">
<select class="form-control"
ng-focus="dcSelectFocused=true"
ng-blur="dcSelectFocused=false">
<option value="">{{label}}</option>
</select>
<i class="fa fa-arrow-down" ng-class="{ 'open': dcSelectFocused }"></i>
</div>
What is the easiest way to assign all select related attributes on to the select tag so I can use it like this:
<dc-select label="Select something" ng-model="model" ng-options="" and so on></dc-select>
Is there an automated way by which I can transfer all attributes to select except "label", and have them function?
It is the valid scenario, but the resistance from Angular doesn't make it a trivial task to do. Usually replace: true
is used to transfer all the attributes to the child template element. But select
isn't a direct descendant, it is not an option.
The other possibility is to use terminal: true
in conjunction with high priority
, because ng-model
, ng-options
and any other attribute directives shouldn't be compiled on dc-select
element. But terminal: true
would also stop the bindings from working (in this case they have to be interpolated manually).
I guess the easiest way is
.directive('dcSelect', function ($compile) {
return {
restrict: 'E',
scope: {
label: '@',
dcNgModel: '=',
dcNgOptions: '='
},
transclude: true,
templateUrl: '/web/_utils/dcselect/dcselect.html',
link: function (scope, element, attrs) {
var select = element.find('select');
angular.forEach(attrs.$attr, function (name, normalizedName) {
if (!name.match(/^dc-/)) return;
var val = scope.hasOwnProperty(normalizedName) ? normalizedName : element.attr(name);
select.attr(name.replace(/^dc-/, ''), val);
});
$compile(select)(scope);
}
};
});
这篇关于为模板中的元素分配指令属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!