javascript - 如何将属性添加到自定义 Angular Directive(指令)

Question

我需要向自定义 Angular Directive(指令)添加一个属性，但我不知道如何将属性(宽度)从 html 部分绑定(bind)到管理行为的 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>

这是 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;
        };
    }
};
});

这是一个用法:

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

所以基本上我想向这个 Angular Directive(指令)添加一个宽度属性。

感谢您的帮助!

Answer 1

您只需要像处理所有其他 3 个变量一样将它传递给作用域:

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

现在您可以在指令的 javascript 中使用 scope.width 来添加元素。

在 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>

编辑:在您的指令 HTML 中，将第一个按钮更改为:

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