angularjs - 在指令中使用 ng-options 并从注入(inject)的服务中获取选项数据

Question

我创建了一个包含选择输入字段的自定义指令。

我正在使用 ng-options 来填充选择选项，并且当前正在使用绑定(bind)到隔离范围的 options 属性传递选项的数据。见下文。

<script>
  recManagerApp.directive(myDirective, function () {
    return {
      restrict: 'E',
      templateUrl: '/templates/directives/mydirective.html',
      scope: {
        mySelectedValue: "=",
        options : "="
      }
    };
  });
</script>

<my-directive my-selected-value="usersValue" options="myDataService.availbleOptions"></my-directive>

<div>
  <select data-ng-model="mySelectedValue" data-ng-options="item for item in options">
    <option value="">Select something</option>
  </select>
</div>

以上内容按预期工作，正确填充选项，选择正确的值，并具有与父范围中的属性的双向绑定(bind)。

但是，我不想使用 my-directive 元素上的属性传递选项，而是注入(inject)可以为 ng-options 提供数据的服务 (myDataService)。然而，当我尝试这个(各种方式)时，尽管服务被正确注入(inject)并且数据可用，但没有创建任何选项。谁能建议一种方法来做到这一点？

recManagerApp.directive(myDirective, function (myDataService) {
    return {
        restrict: 'E',
        templateUrl: '/templates/directives/mydirective.html',
        scope: {
            mySelectedValue: "=",
            options : myDataService.availableOptions
        }
    };
});

谢谢

垫子

Answer 1

在我看来，您有多种选择(如评论中指出的):

1。为指令创建 Controller

在指令的模板中，使用 Controller ，即

<div ng-controller="SelectController">
  <!-- your select with the ngOptions -->
</div>

并将 SelectController 创建为常规 Controller :

var app = angular.module("app.controllers", [])

app.controller("SelectController", ['$scope', 'myDataService', function(scope, service) {
  scope.options = service.whatEverYourServiceDoesToProvideThis()
}]);

您还可以为您的指令提供一个 Controller ，其工作原理是相同的:

recManagerApp.directive(myDirective, function () {
    return {
        restrict: 'E',
        templateUrl: '/templates/directives/mydirective.html',
        scope: {
            mySelectedValue: "=",
        },
        controller: ['$scope', 'myDataService', function(scope, service) {
          scope.options = service.whatEverYourServiceDoesToProvideThis()
        }]
    };
});

2。将其注入(inject)指令并在链接中使用它

recManagerApp.directive(myDirective, function (myDataService) {
    return {
        restrict: 'E',
        templateUrl: '/templates/directives/mydirective.html',
        scope: {
            mySelectedValue: "="
        },
        link: function(scope) {
          scope.options = myDataService.whatEverYourServiceDoesToProvideThis()
        }
    };
});