Как добавить атрибут в настраиваемую угловую директиву

Question

Мне нужно добавить атрибут к настраиваемой угловой директиве, но я не знаю, как связать атрибут (ширину) от html-части с javascript, который управляет этим поведением.

это 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> 

это Javascript позади 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; 
     }; 
    } 
}; 
}); 

это использование:

<dropdownComponent 
    initial-value={{'PERMISSION.CREATE.DROPDOWN.RESOURCE'|translate}} 
    selected-value="permissionCtrl.permission.resourceId" 
    values="permissionCtrl.resources" 
    width="200px"> 
</dropdownComponent> 

Поэтому в основном я хочу добавить ширину ребро к этой угловой директиве.

Благодарим за помощь!

Answer 1

Вам просто нужно передать его в рамки, как вы делаете со всеми 3 другими переменными:

scope: { 
     initialValue: '@', 
     values: '=', 
     selectedValue: '=', 
     width: "@" 
    }, 

И теперь вы можете просто использовать scope.width в JavaScript директивы для добавления к элементам, например.

И в 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: В вашей директиве HTML, изменить первую кнопку:

<button type="button" 
     class="btn btn-default" 
     data-bind="dropdown-label" 
     ng-style="width: {{width}}">{{initialValue}}</button>