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;
});

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

2 个答案: