UI路由器。动态替换根状态的模板答案

【问题标题】：UI-router. Dynamically replace root state's templateUI路由器。动态替换根状态的模板
【发布时间】：2017-01-24 05:10:44
【问题描述】：

我有一个根状态app，它定义了主模板。我需要为特定路线使用不同的模板切换此模板：

app.run(($rootScope, $state) => {
  $rootScope.$on('$stateChangeStart', (toState, toParams, fromState, fromParams) => {
    const rootState = $state.get('app');

    if (toState.name === 'app.new') {
      rootState.template = require('../../new_layout.tpl.html');
    } else {
      rootState.template = require('../../layout.tpl.html');
    }
  }
}

此方法适用于初始应用加载，以及首次应用状态更改（但仅在更改为 new_layout 时）。当我尝试从 app.new 切换到其他状态时，rootState's.template 会发生变化但未被应用（渲染）。

是否有合法的方法来动态替换根状态的模板属性？

【问题讨论】：

标签： angularjs templates angular-ui-router

【解决方案1】：

您可以使用 ui-router View Targeting 来做到这一点。

  $stateProvider.state({ 
    name: 'app', 
    url: '/app', 
    templateUrl: 'layout1.html',
  });

  $stateProvider.state({ 
    name: 'app.new', 
    url: '/new', 
    views: {
      // Target the unnamed ("") ui-view created in the root ("")
      "@": { templateUrl: 'layout2.html' },
      // Target the unnamed ("") ui-view in the layout2 created by this state
      "@app.new": { template: '<h1>app.new content</h1>' }
    }
  });

工作人员：http://plnkr.co/edit/PmPn7kp1u1bRGeYeXK2H?p=preview

当app.new（或任何子状态）处于活动状态时，它会使用layout2.html 覆盖根用户界面视图的内容。然后它把自己的内容放到layout2.html的ui-view中。

【讨论】：