如何从 AngularJS 中的模板调用服务？答案

【问题标题】：How can I call a service from a template in AngularJS?如何从 AngularJS 中的模板调用服务？
【发布时间】：2013-06-03 16:35:19
【问题描述】：

我有一个服务，它返回一个它创建的 json 对象，为简洁起见，我们可以说它看起来像这样：

.service ('levelService', function () {

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

})

我认为这很好，但我现在想在模板中使用它。目前我有这样的事情：

<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>

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

【问题讨论】：

标签： angularjs controller

【解决方案1】：

是的，最好的做法是创建一个控制器。

MVC 应用架构背后的理念是您不会将对象/类紧密耦合在一起。将服务注入控制器，然后您的控制器随后将 levels 添加到 $scope 意味着您的 HTML 不必担心从何处获取数据。

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

提示：最好为dropdown-menu 的父容器（即页面/部分）使用控制器，然后为dropdown-menu 本身使用指令。将指令视为视图组件。

一般来说，您可能会发现egghead.io 上的视频教程很有帮助。

【讨论】：

谢谢！听取了您的建议，而不是制定指令，而是制作了另一个控制器。

【解决方案2】：

将服务放入控制器中.. 然后你可以在你的模板中调用 service..

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

【讨论】：