如何从AngularJS的模板调用服务?

I have a service that returns a json object that it makes, for brevity lets say it looks like this:

我有一个返回json对象的服务

.service ('levelService', function () {

    // service to manage levels.
    return  {
        levels : [{name:'Base', href:'base'},{name:'Level 1', href:'level1'},{name:'level2', href:'level2'}]
    };

})

I think that is fine, but I want to use it now, in a template. Currently I have something like this:

我认为这很好，但我现在想用它作为模板。现在我有这样的东西:

<ul class="dropdown-menu" ng-init="levels = [{name:'Base', href:'base'},{name:'Level 1', href:'level1'},{name:'level2', href:'level2'}];">
                      <li ng-repeat="level in levels">
      <a ng-href="#/modeling/level/{{level.href}}">{{level.name}}</a></li>
                  </ul>

How can I get the ng-init to now use the service? I feel like the right thing to do, is add the service to the controller, but this is outside of any controller. Do i need to create a new controller for this space, or can i directly reference the service?

如何让ng-init现在使用该服务?我认为正确的做法是，将服务添加到控制器中，但这是任何控制器之外的。我需要为这个空间创建一个新的控制器，还是可以直接引用服务?

2 个解决方案

#1

Yes, it would be best practice to create a controller.

是的，创建控制器是最佳实践。

The idea behind the MVC app architecture is that you don't tightly couple your objects/classes together. Injecting a service into a controller, then subsequently your controller adding levels to $scope means that your HTML doesn't have to worry about where it gets the data from.

MVC应用程序架构背后的想法是，不要将对象/类紧密地结合在一起。将一个服务注入到控制器中，然后您的控制器将级别添加到$scope，这意味着您的HTML不必担心它从哪里获取数据。

Also, using ng-init in that way is arguably fine for knocking up a very quick prototype, but that approach shouldn't be used in production code (as your model's data itself is tightly coupled to your view's HTML).

同样，以这种方式使用ng-init可以很好地构建一个非常快速的原型，但是这种方法不应该在生产代码中使用(因为模型的数据本身与视图的HTML紧密耦合)。

Tip: It might be a good idea to use a controller for the parent container of your dropdown-menu (ie. the page/section) and then use a directive for your dropdown-menu itself. Think of a directive as a view component.

提示:在下拉菜单的父容器中使用控制器可能是个好主意。然后为下拉菜单本身使用一个指令。可以将指令视为视图组件。

In general, you might find the video tutorials at egghead.io helpful.

一般来说，你可以在egghead上找到视频教程。io有帮助。

#2

put the service in a controller.. Then you can call service in your template..

把服务放在控制器中。然后你可以在你的模板中调用服务。

app.controller('yourCtrl', function($scope, levelService) {
   $scope.levelService= levelService;
});

#1