How to make a directive refer to a specific row in an array - Angular

Question

I am storing a load of button shortcut types in an array of objects. I am trying to write a directive that will return some values depending on the name of the object. Here is my array stored within the controller:

angular.module('app')
.controller('BtnCtrl', function ($scope) {
    //......rest of controller code here

    $scope.hotKeys = [
        {name: 'primaryTest', keyCode: 49, keyShortcut: "1", funcTriggered: $scope.clickFunction},
        {name: 'secondaryTest', keyCode: 50, keyShortcut: "2", funcTriggered: $scope.clickFunction}
    ]
})

In my HTML directive, I want to specify the object using the name, and then use values from this object. Here is my attempt at a directive so far:

.directive("hotKeyButton", function() {
    return {
        controller: 'BtnCtrl',
        scope: {
            hotKeys: '='
        },
        transclude: true,
        template: "<div class='key-shortcut'>{{hotKeys.keyCode}}</div><div class='hotkey-label'>Button</div>"
    };
})

So here you can see I want to use the keyCode from the relevant row of the array, but I don't know how to pass in the name. Here is my (incorrect) HTML:

<button hot-key-button name="secondaryTest" class="po-btn secondary-btn" type="submit"></button>

How do I tell my directive to pull data from the secondaryTest object?

Thanks

Icycool · Accepted Answer · 2015-10-13 07:59:26Z

1

Since you are using an array for your button, I would assume you use ng-repeat on your buttons? If this is the case, you can then pass the whole button instead of the name into your directive.

<div ng-repeat="button in hotKeys">
  <button hot-key-button hot-key="button" class="po-btn secondary-btn" type="submit"></button>
</div>

.directive("hotKeyButton", function() {
    return {
        controller: 'BtnCtrl',
        scope: {
            hotKey: '=' // you should really use singular here to avoid confusion
        },
        transclude: true,
        template: "<div class='key-shortcut'>{{hotKey.keyCode}}</div><div class='hotkey-label'>Button ({{hotKey.keyShortcut}})</div>"
    };
})

Actually you are not suppose to use <div> inside <button> as per html specification, try to use <span> instead, or use a <div> to replace the <button>.

Edit: In case you are not using it like an array, you might want to consider defining your store using key-value instead of array, so you can access specific entry using its name.

$scope.hotKeys = {
    'primaryTest': {name: 'primaryTest', keyCode: 49, keyShortcut: "1", funcTriggered: $scope.clickFunction},
    'secondaryTest': {name: 'secondaryTest', keyCode: 50, keyShortcut: "2", funcTriggered: $scope.clickFunction}
}

<button hot-key-button hot-key="hotkeys.primaryTest"></button>

// or use it as a variable
<button hot-key-button hot-key="hotkeys[btnName]"></button>

edited Oct 13, 2015 at 7:59

answered Oct 12, 2015 at 17:48

Icycool

7,1991 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MDalt Over a year ago

Good comments...thankyou. I do not want to use a repeater as these buttons could be in various places on the page, they won't necessarily repeat regularly. This is more a place to store my keyboard shortcuts.

TDDdev · Accepted Answer · 2015-10-12 17:51:04Z

0

You could loop across the array checking for matches on name. Then you would need to assign the values from the matching record to a specific value on scope and your directive template should be wired up to match that value.

angular.module('app')
    .controller('BtnCtrl', function ($scope) {
    //......rest of controller code here

    $scope.selectedKeyCode;
    $scope.hotKeys = [
        {name: 'primaryTest', keyCode: 49, keyShortcut: "1", funcTriggered: $scope.clickFunction},
        {name: 'secondaryTest', keyCode: 50, keyShortcut: "2", funcTriggered: $scope.clickFunction}
    ];

    for (i = 0; i < $scope.hotKeys.length; i++) { 
      if ($scope.hotKeys[i].name === $scope.name){
          $scope.selectedKeyCode = row.keyCode;
      }
    }

})

.directive("hotKeyButton", function() {
    return {
    controller: 'BtnCtrl',
    scope: {
        name: '='
    },
    transclude: true,
    template: "<div class='key-shortcut'>{{selectedKeyCode}}</div><div class='hotkey-label'>Button</div>"
};

})

answered Oct 12, 2015 at 17:51

TDDdev

1,5391 gold badge17 silver badges18 bronze badges

1 Comment

MDalt Over a year ago

Very clever. For me this still isn't displaying the values - do I need to change the HTML?

Collectives™ on Stack Overflow

How to make a directive refer to a specific row in an array - Angular

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related