[英]How to add attribute to custom angular directive
I need to add an attribute to a custom angular directive but I do not know how to bind the attribute (width) from the html part to the javascript that manages the behavior. 我需要向自定义的角度指令添加属性,但是我不知道如何将html部分中的属性(宽度)绑定到管理行为的javascript。
this is the html: 这是HTML:
<div class="dropdown btn-group">
<button type="button" class="btn btn-default" data-bind="dropdown-label">{{initialValue}}</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-scrollable" role="menu" aria-labelledby="dropdownMenu">
<li role="presentation" ng-repeat="value in values"
ng-click="clickHandler(value,$event)">
<a role="menuitem" tabindex="-1">{{value}}</a>
</li>
</ul>
this is the javascript behind html: 这是html背后的javascript:
angular.module('platform.directives').directive('dropdownComponent', function() {
'use strict';
return {
restrict: 'E',
scope: {
initialValue: '@',
values: '=',
selectedValue: '='
},
templateUrl: 'modules/directives/dropdown/dropdown.html',
link: function(scope) {
scope.clickHandler = function findAndFillSelectedValueAndCloseDropDownArea(value, event) {
var $target = $(event.currentTarget);
$target.closest('.btn-group')
.find('[data-bind="dropdown-label"]').text($target.text())
.end()
.children('.dropdown-toggle').dropdown('toggle');
scope.selectedValue = value;
return false;
};
}
};
});
this is a usage: 这是一种用法:
<dropdownComponent
initial-value={{'PERMISSION.CREATE.DROPDOWN.RESOURCE'|translate}}
selected-value="permissionCtrl.permission.resourceId"
values="permissionCtrl.resources"
width="200px">
</dropdownComponent>
So basically I want to add a width attribute to this angular directive. 因此,基本上我想向该角度指令添加width属性。
Thank you for your help! 谢谢您的帮助!
You just need to pass it to the scope like you do with all 3 other variables: 您只需要像使用所有其他三个变量一样将其传递给范围:
scope: {
initialValue: '@',
values: '=',
selectedValue: '=',
width: "@"
},
And now you can just use scope.width
in the javascript of the directive to add to elements for example. 现在,您只需在指令的javascript中使用
scope.width
即可添加到元素。
And in HTML (which you should change dropdownComponent
to dropdown-component
by the way): 在HTML中(顺便说一下,您应该将
dropdownComponent
更改为dropdown-component
):
<dropdown-component
initial-value={{'PERMISSION.CREATE.DROPDOWN.RESOURCE'|translate}}
selected-value="permissionCtrl.permission.resourceId"
values="permissionCtrl.resources"
width="200px"></dropdown-component>
EDIT: In your directive HTML, change the first button to: 编辑:在指令HTML中,将第一个按钮更改为:
<button type="button"
class="btn btn-default"
data-bind="dropdown-label"
ng-style="width: {{width}}">{{initialValue}}</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.