【问题标题】:Dynamic template Angular UI-Router动态模板 Angular UI-Router
【发布时间】:2021-11-29 05:56:05
【问题描述】:

我正在尝试根据用户加载导航栏。

为此,我需要设置一个动态模板,但我看不到我的$rootScope

$stateProvider
    /*Login*/
    .state('login', {
        url: '/',
        data: {pageTitle: 'Inicio de sesión.'},
        resolve: {},
        views: {
            'navbar': {
                templateUrl: null,
                controller: null
            },
            'body': {
                templateUrl: "views/login.html",
                controller: 'LoginController'
            }
        }
    })
    .state('home', {
        url: '/home',
        data: {pageTitle: 'Home.'},
        views: {
            'navbar': {
                templateUrl: "views/navbar.html", //here dynamic template
                controller: null
            },
            'body': {
                templateUrl: "views/inicio.html",
                controller: null
            }
        }
    })
    .state('perfil', {
        url: '/perfil',
        data: {pageTitle: 'Perfil de usuario.'},
        views: {
            'navbar': {
                templateUrl: function (sessionProvider) {
                    var sessionFactory = sessionProvider.path();
                    return sessionFactory;
                }, // this return a tring, but don't load anything
                controller: null
            },
            'body': {
                templateUrl: "views/usuario/perfil.html",
                controller: 'UsuarioController'
            }
        }
    });

我尝试使用服务加载数据,但没有成功,还尝试从 localStorageService 加载,但不显示任何内容。

有没有单一的加载方式?

【问题讨论】:

  • 你试过 ng-include 了吗?

标签: javascript angularjs html angular-ui-router state


【解决方案1】:

为此提供了一些功能,例如 templateUrltemplateProvider。在此处查看所有详细信息:

Trying to Dynamically set a templateUrl in controller based on constant

例如这可能是 templateProvider 的示例,而不是 'templateUrl' 静态路径

templateProvider: function(CONFIG, $templateRequest) {
    console.log('in templateUrl ' + CONFIG.codeCampType);

    var templateName = 'index5templateB.html';

    if (CONFIG.codeCampType === "svcc") {
         templateName = 'index5templateA.html';
    } 

    return $templateRequest(templateName);
},

【讨论】:

  • 非常感谢,这正是我想要的!
  • 很高兴看到这一点,享受强大的 UI-Router ;)
猜你喜欢
  • 1970-01-01
  • 2014-02-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-10-16
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多