Angularjs uiRouter中的异步模板提供程序

结果出了点小问题。 在我的UI.state提供程序中，我想使用一个函数来获取基于用户访问的菜单，用户访问将由API调用确定

到目前为止一切正常，有一个restangular调用，获取信息并根据返回生成菜单（使用md按钮）。我的问题是，如何让templateProvider接受输入。 以下是路线不工作时的代码

===========================简单（且不完整）示例============================

$stateProvider
    .state('index', {
        url: "/index",
        views: {
            main: {templateUrl: "page/welcome"},
            menu: {
                templateProvider:
                    function ($http, $stateParams, accessFactory) {
                        return accessFactory.getMenu('home', function(menu){
                            console.log("Got back " + menu);
                            return menu;
                        });
                        //return '<md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button>';

                    }
            }
        }

    })

state('home', {
                url: "/home",
                views: {
                    main: {templateUrl: "spage/home"},
                    actionmenu: {templateUrl:"spage/home/actionmenu"},
                    menu: {
                        templateProvider:
                            function ($http, $stateParams,  accessFactory) {
                                //return '<md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button>';
                                return accessFactory.getMenu('internal', function(menu){
                                    console.log("Got back " + menu);
                                    return menu;
                                    //return menu;
                                });

                                //return accessFactory.getMenu('internal');
                            }
                    }
                }

   service.getMenu = function(req, callback){


        if (req === 'login'){
            callback('<md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Login" ui-sref="login"><md-icon md-svg-src="/images/icons-svg/unlock.svg" class="svg-icon" style="color: rgb(0, 0, 0);"></md-icon> </md-button>');

//            return '<md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Login" ui-sref="login"><md-icon md-svg-src="/images/icons-svg/unlock.svg" class="svg-icon" style="color: rgb(0, 0, 0);"></md-icon> </md-button><md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button><md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button><md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button><md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button><md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button>';
        } else if(req === 'home'){
            callback('<md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button>');
        }

$stateProvider
.state（'索引'{
url:“/index”，
观点：{
main:{templateUrl:“页面/欢迎”}，
菜单：{
模板提供程序：
函数（$http、$stateParams、accessFactory）{
返回accessFactory.getMenu（'home'，函数（菜单）{
console.log（“返回”+菜单）；
返回菜单；
});
//返回“”；
}
}
}
})

我查过了

响应起作用，函数的行呈现按钮（不调用函数的测试返回是“返回”菜单的副本）

如果我不调用函数，只是返回，我就会得到按钮

如果我将其更改为对只返回字符串的函数的调用，则它可以工作

这是不起作用的函数

knowledge.factory('accessFactory', ['$http', "Restangular", '$timeout', function($http, Restangular, $timeout) {
    var service = Restangular.service("access");
    var userAccess=null;
    service.getMyAccess = function(callback) {
        service.one('list').one('me').get().then(function(data){
            userAccess = data;
            callback(userAccess)
        })
    }
    service.MyAccess = function(callback){
        if(userAccess === null ){
            service.getMyAccess(function(data){
                callback(userAccess);
            })
        } else {
            callback(userAccess);
        }
    }


   service.getMenu = function(menutype, callback){


        if (menutype === 'login'){
            callback('<md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Login" ui-sref="login"><md-icon md-svg-src="/images/icons-svg/unlock.svg" class="svg-icon" style="color: rgb(0, 0, 0);"></md-icon> </md-button>');

//            return '<md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Login" ui-sref="login"><md-icon md-svg-src="/images/icons-svg/unlock.svg" class="svg-icon" style="color: rgb(0, 0, 0);"></md-icon> </md-button><md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button><md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button><md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button><md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button><md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button>';
        } else if(menutype === 'home'){
            callback('<md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button>');
        }

knowledge.factory（'accessFactory'，['$http'，'restanglar'，'$timeout'，函数（$http，restanglar，$timeout）{
var service=restanglar.service（“访问”）；
var userAccess=null；
service.getMyAccess=函数（回调）{
service.one（'list'）.one（'me'）.get（）.then（函数（数据）{
用户访问=数据；
回调（用户访问）
})
}
service.MyAccess=函数（回调）{
if（userAccess==null）{
service.getMyAccess（函数（数据）{
回调（用户访问）；
})
}否则{
回调（用户访问）；
}
}
service.getMenu=函数（menutype，回调）{
如果（menutype==='login'）{
回调（“”）；
//返回“”；
}else if（menutype==='home'）{
回调（“”）；
}

如果我把它改成只返回相同的字符串，它就会断开。有什么想法吗

============================原始（与已损坏的一样）示例======================

$stateProvider
    .state('index', {
        url: "/index",
        views: {
            main: {templateUrl: "page/welcome"},
            menu: {
                templateProvider:
                    function ($http, $stateParams, accessFactory) {
                        return accessFactory.getMenu('home', function(menu){
                            console.log("Got back " + menu);
                            return menu;
                        });
                        //return '<md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button>';

                    }
            }
        }

    })

state('home', {
                url: "/home",
                views: {
                    main: {templateUrl: "spage/home"},
                    actionmenu: {templateUrl:"spage/home/actionmenu"},
                    menu: {
                        templateProvider:
                            function ($http, $stateParams,  accessFactory) {
                                //return '<md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button>';
                                return accessFactory.getMenu('internal', function(menu){
                                    console.log("Got back " + menu);
                                    return menu;
                                    //return menu;
                                });

                                //return accessFactory.getMenu('internal');
                            }
                    }
                }

   service.getMenu = function(req, callback){


        if (req === 'login'){
            callback('<md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Login" ui-sref="login"><md-icon md-svg-src="/images/icons-svg/unlock.svg" class="svg-icon" style="color: rgb(0, 0, 0);"></md-icon> </md-button>');

//            return '<md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Login" ui-sref="login"><md-icon md-svg-src="/images/icons-svg/unlock.svg" class="svg-icon" style="color: rgb(0, 0, 0);"></md-icon> </md-button><md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button><md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button><md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button><md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button><md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button>';
        } else if(req === 'home'){
            callback('<md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button>');
        }

state（'home'{
网址：“/home”，
观点：{
main:{templateUrl:“spage/home”}，
动作菜单：{templateUrl:“spage/home/actionmenu”}，
菜单：{
模板提供程序：
函数（$http、$stateParams、accessFactory）{
//返回“”；
返回accessFactory.getMenu（'internal'，函数（菜单）{
console.log（“返回”+菜单）；
返回菜单；
//返回菜单；
});
//返回accessFactory.getMenu（'internal'）；
}
}
}

对于非异步调用，我可以只使用return-accessFactory.getMenu（'internal'）。我想我可以使用元素，但这似乎是空穴来风

有什么建议吗

=============应添加部分工厂================

$stateProvider
    .state('index', {
        url: "/index",
        views: {
            main: {templateUrl: "page/welcome"},
            menu: {
                templateProvider:
                    function ($http, $stateParams, accessFactory) {
                        return accessFactory.getMenu('home', function(menu){
                            console.log("Got back " + menu);
                            return menu;
                        });
                        //return '<md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button>';

                    }
            }
        }

    })

state('home', {
                url: "/home",
                views: {
                    main: {templateUrl: "spage/home"},
                    actionmenu: {templateUrl:"spage/home/actionmenu"},
                    menu: {
                        templateProvider:
                            function ($http, $stateParams,  accessFactory) {
                                //return '<md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button>';
                                return accessFactory.getMenu('internal', function(menu){
                                    console.log("Got back " + menu);
                                    return menu;
                                    //return menu;
                                });

                                //return accessFactory.getMenu('internal');
                            }
                    }
                }

   service.getMenu = function(req, callback){


        if (req === 'login'){
            callback('<md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Login" ui-sref="login"><md-icon md-svg-src="/images/icons-svg/unlock.svg" class="svg-icon" style="color: rgb(0, 0, 0);"></md-icon> </md-button>');

//            return '<md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Login" ui-sref="login"><md-icon md-svg-src="/images/icons-svg/unlock.svg" class="svg-icon" style="color: rgb(0, 0, 0);"></md-icon> </md-button><md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button><md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button><md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button><md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button><md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button>';
        } else if(req === 'home'){
            callback('<md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" ui-sref="index"><md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon> </md-button>');
        }

service.getMenu=函数（请求，回调）{
如果（请求=='login'）{
回调（“”）；
//返回“”；
}否则，如果（请求=='home'）{
回调（“”）；
}

根据文件（）它应该可以工作

$stateProvider.state('contacts', {
  templateProvider: function ($timeout, $stateParams) {
    return $timeout(function () {
      return '<h1>' + $stateParams.contactId + '</h1>'
    }, 100);
  }
})

$stateProvider.state（'contacts'）{
templateProvider:函数（$timeout，$stateParams）{
返回$timeout（函数（）{
返回'+$stateParams.contactId+''
}, 100);
}
})

---

奇怪的是，超时版本工作正常，输出与回调完全相同，我是不是错过了一些非常明显的东西？

您是否尝试返回$promise。查看UI路由器wiki上使用的示例：

$stateProvider.state('contacts', {
  templateProvider: function ($timeout, $stateParams) {
    return $timeout(function () {
      return '<h1>' + $stateParams.contactId + '</h1>'
    }, 100);
  }
})

---

仔细检查后，我尝试返回accessFactory，目前我甚至没有调用服务。第一…函数当前设置为直接回调（'[HTMLOK，我撒谎了，我没有测试过这一点，试图找出如何最容易地实现回拨。应该补充的是，api调用只返回用户的访问权限，而不是HTML菜单。但正在使用它：）这似乎部分有效。您对如何提示回调有什么好的建议吗？例如，当前流是templateProvider调用getMenu函数，该函数调用getAccess（如果未设置Access，则调用updateAccess）。那么，最简单的翻译方法是什么？（抱歉，java上的OK'ish，仍在努力实现承诺）我用$q.defer（）更新了答案并添加了承诺，但我认为最好在服务上使用$q.defer（）来生成一个将被解决（或拒绝）的承诺根据请求的成功。告诉我是否会得到帮助。我确实同意从设计角度来看，肯定应该这样做。但可能不得不推迟到下一次（没有双关语的意思）。不过很有魅力：）