如何在AngularJS中组件的ng-option中加载值

Question

我在 AngularJS 中创建了一个组件来加载下拉列表中的值。但是，我无法将任何值传递给组件，进而通过 ng-option 加载到列表中。

控制器

(function() {
  "use strict";
  angular.module("dropdownCtrl", [])
  .component("dropdownControl", {
    template: `
        <select ng-model="varName.name"
                ng-option="val.value for val in varValues">
        </select>
    `,
    controller: dropdownCtrl,
    bindings: {
      varName: "=",
      varValues: "="
    }
  });

  dropdownCtrl.$inject = ["$scope","$routeParams","$location","qlikService","settingsService","kpirenderService"];

  function dropdownCtrl($scope,$routeParams,$location,qlikService,settingsService,kpirenderService) {

  }
})();

HTML 中使用的组件 - dropdown-control

<div class="w-100 viz chart-object p-10"
     ng-repeat="chart in dashboard.settings.charts|limitTo:2">   
    <div class="grid box-card">
        <div class="qvobject-wrapper">
            <div class="object-actions"
                 ng-repeat="var in chart.variables.slice(1)|limitTo:1">
                <dropdown-control var-name="var.name" var-values="var">
                </dropdown-control>
            </div>
            <div id="{{chart.objId}}" class="qvobject"></div>
        </div>
    </div>
</div>

值所在的Json

"charts": [{
    "objId": "mbYRef",
    "title": "% Forecast Attainment",
    "variables": [{
            "name": "vForecast_Type",
            "value": ["Budget", "Latest"]
        },
        {
            "name": "vMetric",
            "value": ["Net Sales", "TRx"]
        }
    ]
}]

Answer 1

调试技术之一是插入插值 ({{ }}) 来检查值：

app.component("dropdownControl", {
    template: `
        varName={{$ctrl.varName}}<br>
        varValues={{$ctrl.varValues}}<br>
        <select ng-model="varName.name"
                ng-option="val.value for val in varValues">
        </select>
    `,
    controller: dropdownCtrl,
    bindings: {
      varName: "=",
      varValues: "="
    }
});

使用此技术检查变量是否具有预期值。我看到的一个问题是 HTML 中的表达式没有引用 $ctrl 对象。