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

时间:2013-08-06 08:29:55

标签: angularjs angularjs-directive

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

我正在使用ng-options填充选项选项,而我正在使用绑定到隔离范围的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>

以上按预期工作,正确填充选项,选择正确的值并与父作用域中的属性进行双向绑定。

但是,我宁愿不使用my-directive元素上的属性传递选项,而是注入可以为ng-options提供数据的服务(myDataService)。但是,当我尝试这种(各种方式)时,尽管服务正确注入且数据可用,但没有创建任何选项。任何人都可以建议一种方法吗?

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

由于

1 个答案:

答案 0 :(得分:5)

在我看来,你有几个选择(正如评论中所指出的):

1。为指令

创建控制器

在指令模板中,使用控制器,即

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

并将SelectController创建为常规控制器:

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

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

你也可以给你的指令一个控制器,它的工作方式是相同的:

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。将其注入指令并在链接

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