调试Angular1选择下拉列表

Question

之前我曾经使用过Angular1选项，但是我正忙着解开正在与我合作的选项。

这是我正在尝试构建的选择的模板：

<div class="dropdown-selector-container">
  <select
    class="dropdown-select"
    data-ng-options="option.sectionId as option.label for option in dropdownOptions"
    data-ng-model="selectedSection"
    data-ng-change="setDropdownOption()">
  </select>
</div>

控制器中的对象和方法如下所示：

$scope.dropdownOptions = [
  {
    'label': 'ok',
    'sectionId': '1',
  },
  {
    'label': 'wow',
    'sectionId': '2',
  }
];

$scope.setDropdownOption = function() {
  console.log($scope);
};

可以使用预期行为的工作小提琴here。

问题是，当我在template中的controller和development instance内的代码中复制代码时，我只能在的路径中显示代码（其中下拉列表仅在宽度为800px的视口中可见或者更少），由控制器函数打印的$ state对象不包含selectedSection键：

{{3}}

有谁知道为什么会这样？我非常感谢您提出的任何建议！

Answer 1

解决这个问题的关键是学习可以从控制台检查元素的范围，例如angular.element(".dropdown-selector-container select").scope()。这导致我找到了解决方案：

我注意到dropdownOptions对象存在于控制器范围内，因此我将data-ng-model设置为dropdownOptions.selected，并且在更改时我现在可以与此值进行交互。

React使这种继承变得更好......