14

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

4

2 回答 2

12

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

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

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

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

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

于 2013-06-03T17:27:50.807 回答
6

将服务放在控制器中..然后您可以在模板中调用服务..

app.controller('yourCtrl', function($scope, levelService) {
   $scope.levelService= levelService;
});
于 2016-10-18T07:19:42.043 回答