如何从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上的视频教程很有帮助。