angularjs - 模板中的控制器及其依赖项

Question

我有一个通用列表视图的控制器：

(angular
 .module('app.controllers')
 .controller('ItemListContr', [
     /*****/ '$scope', 'ItemData',
     function($scope,   ItemData,) {
         ...
     }
 ])
);

whereItemData不是现有组件的名称，而是我从路由注入控制器的服务的占位符名称：

(angular
 .module('app', ['app.controllers', 'app.services'])
 .config([
     /******/ '$routeProvider',
     function ($routeProvider) {
         $routeProvider
             .when('/books', {
                 controller: 'ItemListContr',
                 resolve: {ItemData: 'BookData'},
                 templateUrl: 'book-list.html'
             })
             .when('/magazines', {
                 controller: 'ItemListContr',
                 resolve: {ItemData: 'MagazineData'},
                 templateUrl: 'magazine-list.html'
             })
     }])
);

其中BookData和MagazineData是app.services模块中定义的服务。

我还需要在模板中使用这个控制器：

<span ng-controller="ItemListContr">...</span>

但我需要为其提供数据源ItemData。而且我不知道如何从模板中做到这一点。

Answer 1

您可以使用$injector在控制器中按名称获取服务。

像这样：

var myApp = angular.module('myApp', []);

myApp.value('ItemData', 'BookData')

myApp.service('BookData', function () {
    return {
        test: function () {
            alert("Test called in BookData!");
        }
    }
});

myApp.controller('ItemListContr', function ($scope, $injector, ItemData) {
    var myService = $injector.get(ItemData);
    myService.test();
});

这是一个小提琴