angularjs – Angular ui.router重新加载父模板提供者

前端之家收集整理的这篇文章主要介绍了angularjs – Angular ui.router重新加载父模板提供者前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个抽象的基本模板,可以根据用户类型加载导航.这部分适用于初始加载.问题是我无法在用户登录或注销后重新加载父模板.我已尝试使用解决方here重新加载父模板,但导航模板不受影响.有没有办法重新加载templateProvider,或更好的方法吗?理想情况下,我不必将导航提供程序添加到每个子路由.

路线:

  1. $stateProvider
  2. .state('base',{
  3. abstract: true,views: {
  4. content: {
  5. template: '<ui-view></ui-view>',},nav: {
  6. templateProvider: function ($templateFactory,User,$stateParams){
  7. if(User.exists()){
  8. var url = '/static/html/navs/' + User.get.type + '.html';
  9. return $templateFactory.fromUrl(url);
  10. }
  11. else{
  12. return false;
  13. }
  14. }
  15. }
  16. }
  17. })
  18.  
  19. .state('base.index',{
  20. url: '/',controller: 'loginController',templateUrl: 'static/html/landing/login.html'
  21. })

github issue尝试的控制器功能

  1. scope.login_submit = function(e){
  2. e.preventDefault();
  3. User.login(scope.login,function(res){
  4. $state.transitionTo(
  5. 'base.dashboard',null,{reload: true,inherit: true,notify: true }
  6. );
  7. });
  8. };
我创建了 working example here.它来自 Q & A

这将是调整后的状态def:

  1. .state('base',{
  2. abstract: true,views: {
  3. '': {
  4. template: '<ui-view></ui-view>',/*
  5. nav: {
  6. templateProvider: function ($templateFactory,$stateParams){
  7. if(User.exists()){
  8. var url = '/static/html/navs/' + User.get.type + '.html';
  9. return $templateFactory.fromUrl(url);
  10. }
  11. else{
  12. return false;
  13. }
  14. }
  15. },*/
  16. nav: {
  17. templateProvider: ['User','$templateRequest',function(User,templateRequest){
  18.  
  19. var tplName = 'templates/templateNotExists.html';
  20.  
  21. if(User.exists) {
  22.  
  23. tplName = 'templates/templateExists.html';
  24. }
  25.  
  26. return templateRequest(tplName);
  27. }],}
  28. })

我们可以看到,我们使用名为’$templateRequest’的新功能,根据网址从服务器获取html模板.

这些是控制器和服务

  1. .controller('loginController',['$scope','User',function ($scope,User) {
  2. $scope.User = User;
  3. }])
  4. .factory('User',function(){ return { exists: false,}; })

这是子’base.index’状态模板的内容

  1. <input type="checkBox" ng-model="User.exists" />
  2. <button ng-click="$state.go('base.index',{reload: true})" >reload</button>

检查所有在action here

猜你在找的Angularjs相关文章