Question

我有一个根状态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会更改，但不会应用（呈现）。

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

Answer 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覆盖根ui-view的内容。然后它将自己的内容放在layout2.html的ui-view。

中

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

1 个答案: