如何在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中正在使用的组件-下拉控件

<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对象。