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.
this is the 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:
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.
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.
And in HTML (which you should change dropdownComponent
to dropdown-component
by the way):
<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:
<button type="button"
class="btn btn-default"
data-bind="dropdown-label"
ng-style="width: {{width}}">{{initialValue}}</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.