AngularJS自定义指令隔离作用域模型绑定

我正在尝试实现一个double select列表表单组件，只是为了尝试angular并更好地理解它

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

由于表单可能需要不止一个这样的双选择列表组件，我不想依赖硬编码的属性名，而是允许为双向数据绑定传递列表

下面是代码的JSBin：

除了通过传入的模型属性名将数据绑定到列表之外，我没有做更多的工作

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

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

有人能告诉我为什么控制器属性从不绑定到指令属性吗

---

谢谢

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

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

应该是：

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

在其他地方声明数组，如在link函数中：

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

---

要扩展aet的答案，您在html中指定指令属性的方式不起作用的原因是html不区分大小写。因此，“availableItems”属性实际上是作为“availableItems”传递到指令范围的。另一方面，像“available items”这样的蛇形大小写单词将在您的代码中转换为驼峰大小写

这就是为什么您在html中将angular指令写为'ng repeat'，'ng model'，等等，但在angular源代码中，您将看到这些指令名称的大小写为'ngRepeat'，'ngModel'

---

在HTML中使用snake-case，在Javascript中使用camel-case（角度）！我花了太长时间在一些由这种混乱引起的错误上

谢谢，我现在看到控制台记录了阵列，这样我就明白了答案，除了highlightedXYZ属性问题，我现在明白了。绑定问题是连字符的属性名称。这是一个对Angular有系统性的规则吗？也就是说，如果我给属性一个小写的Camel名称，它将查找连字号小写的Camel？是的，我现在找不到正确的，但是Angular文档中有一节谈到了这一点。好的，这里是：在接近顶部的地方，他们讨论了属性命名和用于名称转换的算法。非常感谢你为我找到了这一点，我只是想了解幕后发生了什么，而不仅仅是接受它。我将通读一遍，然后继续让模板中的绑定正常工作。谢谢