Question

我正在尝试实现一个双选列表表单组件，只是为了尝试使用angular并尝试更好地理解它。

该指令的功能是父模型包含可供选择的可用项列表，并包含放置所选项的目标列表（已选择）。选择某个项目后，它将从可用数组中删除并放入所选数组中。

由于表单可能需要多个这两个双选列表组件，我不想依赖硬编码属性名称，而是允许传递列表以进行双向数据绑定。

除了尝试通过传入的模型属性名称将数据绑定到列表之外，我没有做任何事情。

在指令上，定义了以下范围属性。 availableItems和selectedItems都应绑定到父控制器属性。 highlightAvailable和highlightedSelected用于存储按钮单击之前的用户选择。

  scope: {
        availableItems: '=',
        selectedItems:  '=',
        highlightedAvailable: [],
        highlightedSelected: []
    },

有人可以告诉我为什么控制器属性永远不会绑定到指令属性吗？

谢谢！

Answer 1

首先，您的范围导致错误：

scope: {
    availableItems: '=',
    selectedItems:  '=',
    highlightedAvailable: [],
    highlightedSelected: []
},

应该是：

scope: {
    availableItems: '=',
    selectedItems:  '='
},

在其他地方声明数组，例如在链接函数中：

link: function (scope, element, attrs) {
      scope.highlightedAvailable = [];
      scope.highlightedSelected = [];

下一个问题是您为指令指定了属性的方式，您有：

<div ng-Select-Lists availableItems='availableItems' selectedItems='selectedItems'>

请改为尝试：

<div ng-Select-Lists available-items='availableItems' selected-items='selectedItems'>

Answer 2

为了扩展aet的答案，你在html中指定你的指令属性的方式不起作用的原因是因为HTML不区分大小写。所以＆＃39; availableItems＆＃39;属性实际上是作为＆＃39; availableitems＆＃39;传递给您的指令范围。另一方面，像蛇一样的可用物品＆＃39;将在您的角度代码中转换为驼峰案例。

这就是你在html中编写角度指令作为＆＃39; ng-repeat＆＃39; ng-model＆＃39;等等的原因，但是在角度源代码中你会看到这些指令名称来源于：＆＃39; ngRepeat＆＃39;，＆＃39; ngModel＆＃39; ...

要非常小心地在HTML中使用snake-case，并在Javascript（Angular）中使用驼峰的情况！我对这种混乱导致的一些错误花了太长时间。

AngularJS Custom Directive隔离范围模型绑定

2 个答案: