асинхронный шаблонProvider в uiRouter

Question

Закончен с небольшой проблемой. В моем провайдере UI.state я хотел использовать функцию, чтобы получить меню на основе доступа пользователей, а доступ пользователей будет определяться вызовом API.

Все прекрасное до сих пор имеет ретрансляционный вызов, который получает информацию и генерирует меню на основе возврата (с использованием кнопки 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>'; 

        } 
      } 
     } 

    }) 

Итак, все, что я проверил.

1. The ответных работы, линия, которая приходит нашу функцию делает кнопка (тест возврат без вызова функции является копией «Вернулись» + меню
2. Если я не называю функция и просто вернуться, я получаю кнопку
3. Если изменить это, чтобы быть вызов функции, которая просто возвращает строку, она работает.

Это функция, которая не работает

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>'); 
     } 

Если я изменю его, чтобы просто вернуть ту же строку, он разбивается. Есть идеи?

==================== Оригинальный (как раз сломанный) пример =================== ===

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'); 
          } 
        } 
       } 

Для некурящих вызовов асинхронных, я могу просто использовать возврат accessFactory.getMenu ('внутренний'). Я думал, что могу использовать Элемента, но это кажется мертвым в воде.

Любые предложения?

============ Если добавить часть заводской ================

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>'); 
     } 

И согласно документации (https://github.com/angular-ui/ui-router/wiki) он должен работать

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

как ни странно, версия тайм-аут работы, с точно такой же вывод, как обратный вызов дает, я просто не хватает что-то действительно действительно очевидное?

Answer 1

Вы попробовали вернуть обещание $. Проверьте пример, используемый в вики UI-маршрутизатор:

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

Обратите внимание на то, что строка начинается с возврата $ таймаута (.... Пытались ли вы, что accessFactory.getMenu («дом») вернуть $ обещание или создать новый с $ q.defer(), как это:

... 
templateProvider: 
     function ($q, $stateParams, accessFactory) { 
      var deferred=$q.defer(); 
      accessFactory.getMenu('home',function(menu){ 
       console.log("Got back " + menu); 
       deferred.resolve(menu); 
       }); 
      return deferred.promise; 
      }), 
...