Как я могу вызвать службу из шаблона в AngularJS?

У меня есть служба, которая возвращает объект 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 использовать службу? Я чувствую, что это правильно, добавляет сервис в контроллер, но это не доступно для любого контроллера. Нужно ли мне создавать новый контроллер для этого пространства или я могу напрямую ссылаться на службу?

Ответы

Ответ 1

Да, было бы лучше всего создать контроллер.

Идея архитектуры приложения MVC заключается в том, что вы не плотно соединяете свои объекты/классы вместе. Внедрение службы в контроллер, а затем добавление вашего контроллера levels в $scope означает, что вашему HTML не нужно беспокоиться о том, откуда он получает данные.

Кроме того, использование ng-init таким образом, возможно, отлично подходит для быстрого запуска прототипа, но этот подход не должен использоваться в производственном коде (поскольку ваши данные модели тесно связаны с вашим HTML-представлением).

Совет. Возможно, неплохо было бы использовать контроллер для родительского контейнера вашего dropdown-menu (то есть страницы/раздела), а затем использовать директиву для самого dropdown-menu. Подумайте о директиве как компоненте вида.

В общем, вы можете найти видеоуроки в egghead.io.

Ответ 2

поместите сервис в контроллер. Затем вы можете вызвать услугу в своем шаблоне.

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