如何使指令引用數組中的特定行 - 角度

我在對象數組中存儲按鈕快捷方式類型的負載。我想寫一個指令，將返回取決於對象的名稱的一些值。這裏是我的陣列存儲在控制器內：如何使指令引用數組中的特定行 - 角度

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} 
    ] 
})

在我的HTML指令，我要指定使用name的對象，然後從該對象使用的值。這是我在一個指令嘗試至今：

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

所以在這裏你可以看到我想從數組的相關行使用keyCode，但我不知道如何在name通過。這裏是我的（不正確）HTML：

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

我如何告訴我的指令，從secondaryTest對象提取數據？

感謝

來源

2015-10-12 MDalt

由於您使用您的按鈕數組，我會假設你用你的按鈕ng-repeat？如果是這種情況，您可以將整個按鈕而不是名稱傳遞給您的指令。

<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>" 
    }; 
})

其實你並不想使用<div>內<button>按照HTML規範，儘量使用<span>替代，或者用一個<div>更換<button>。

編輯：如果你不使用它像一個數組，你可能要考慮使用鍵值，而不是數組定義您的商店，這樣你就可以使用其名稱訪問特定的條目。

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

來源

2015-10-12 17:48:06 Icycool

好評論...三江源。我不想使用中繼器，因爲這些按鈕可能位於頁面的各個位置，它們不一定會重複。這更適合存儲我的鍵盤快捷鍵。 – MDalt

@MDalt根據附加信息編輯 – Icycool

Amazin。這工作。謝謝！ – MDalt

你可以遍歷數組檢查名字上的匹配。然後您需要將匹配記錄中的值分配給作用域上的特定值，並且您的指令模板應該連線以匹配該值。

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>" 
};

}）

來源

2015-10-12 17:51:04 TDDdev

非常聰明。對我來說，這仍然沒有顯示值 - 我是否需要更改HTML？ – MDalt

如何使指令引用數組中的特定行 - 角度

回答

相關問題