Question

所以，我试图在我的应用程序中使用ui-router状态。该应用程序显示有关项目的信息，并且根据项目的类型，页面的布局会有很大差异。因此，我有一堆完全独立的html页面，每个项目类型一个。

用户可能会点击以下网址：＆＃39; app / items / id：18273981729＆＃39;。在这种情况下，我想剥离id，发送一个HTTP GET请求来命中数据库，检索具有该id的项目，检查该项目的类型，并将用户路由到正确的html页面，具体取决于他/她指定的id的项目类型。

我一般都试图做以下事情：

angular.module('app').config(function ($stateProvider, $http) {
    $stateProvider.state('display', {
        url: 'app/items/:itemId',
        templateUrl: function(attrs) {

            var url = '';

            // use $http.get to get the item from the database,
            // check it's type, and return the correct URL
            $http.get('/api/items/' + attrs.itemId).success(
                function(data) {
                    var itemType = data['itemType'];
                    switch (itemType) {
                        case 'type1':
                            url = 'url1';
                        case 'type2':
                            url = 'url2';
                    }
                }
            );

            return url;
        },
        controller: 'displayCtrl as display'
    });
});

正如我现在所知，由于$ http是一项服务，因此无法将其注入module.config。我听说服务可以注入run函数，但是当我替换＆＃34; config＆＃34;与＆＃34;运行＆＃34;在上面的伪代码中。我还有其他选择吗？我不确定如何实现我的目标。

Answer 1

您可以将命名函数与$inject模块一起使用。试试这个

angular.module('app').config(function ($stateProvider, $http) {
    $stateProvider.state('display', {
        url: 'app/items/:itemId',
        templateUrl: templateFn,
        controller: 'displayCtrl as display'
    });
});

templateFn.$inject = ['$http'];


function templateFn(attrs) {

            var url = '';

            // use $http.get to get the item from the database,
            // check it's type, and return the correct URL
            $http.get('/api/items/' + attrs.itemId).success(
                function(data) {
                    var itemType = data['itemType'];
                    switch (itemType) {
                        case 'type1':
                            url = 'url1';
                        case 'type2':
                            url = 'url2';
                    }
                }
            );

            return url;
        }
}

Answer 2

或者您可以使用可注射的templateProvider。在那里，您可以获取数据，执行逻辑并根据以下内容返回模板：

'templateProvider': [
    '$http',
    function ($http) {
        return $http.get('a.json').then(
            function (response) {
                return $http.get(response.data.type + '.html').then(
                    function (response) {
                        return response.data;
                    }
                );
            }
        );
    }
]

关于Plunker的工作示例：http://plnkr.co/edit/gBi1LAJ8rmv6a3d1t9Gl?p=preview

Angularjs：将$ http注入module.config的替代方法

2 个答案: