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

Question

我有一个服务返回它所做的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现在使用该服务？我觉得正确的做法是将服务添加到控制器,但这不在任何控制器之外.我是否需要为此空间创建新的控制器,还是可以直接引用该服务？

Answer 1

是的,最好的做法是创建一个控制器.

MVC应用程序架构背后的想法是,您不要将对象/类紧密耦合在一起.注射服务为一体的控制器,随后控制器添加levels到$scope您的HTML不必担心它从获取数据的装置.

此外,ng-init以这种方式使用可以说是很好的用于敲击一个非常快速的原型,但是这种方法不应该用在生产代码中(因为你的模型的数据本身与你的视图的HTML紧密耦合).

提示:为您的父容器dropdown-menu(即页面/部分)使用控制器,然后为您dropdown-menu自己使用指令可能是个好主意.将指令视为视图组件.

通常,您可能会发现egghead.io上的视频教程很有帮助.

Answer 2

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

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