Angular ui-router 重新加载 ng-include 外部 ui-view答案

【问题标题】：Angular ui-router reloading ng-include outside ui-viewAngular ui-router 重新加载 ng-include 外部 ui-view
【发布时间】：2014-11-18 16:12:59
【问题描述】：

可能是整个布局错误，但这是我的情况，我使用的是 Meanjs.org 堆栈和 Angular ui-router。

我有这样的布局：

<div data-ng-include="'/modules/core/views/header.client.view.html'"></div>

<div id="page-content" class="clearfix" fit-height>
    <div id="wrap" data-ui-view="" class="mainview-animation"></div>
</div>

现在我需要在更改 $state 时重新加载 header.client.view.html 中的控制器。

例如，当我在登录页面并登录时，我需要重新加载标头控制器，但是这样做是不可能的，因为 ui-router 仅使用相关模板更改 ui-view 部分：

// this change only ui-view, doesn't care about the ng-include before    
state('home', {
    url: '/',
    templateUrl: 'modules/core/views/home.client.view.html',
});

我发现可以为状态添加更多 ui-view，因此我可以为标题添加 ui-view2，而不是使用 ng-include，但这意味着在每个状态上都有 ui-view2。

有什么建议吗？

【问题讨论】：

标签： angularjs angular-ui-router angularjs-ng-include

【解决方案1】：

您可能不需要在每次状态更改时“重新加载控制器”，而是让您的控制器即时响应状态更改并更新其属性。

查看 ui-router $stateChangeSuccess event。

【讨论】：

【解决方案2】：

首先你需要听@Matti Virkkunen 最好用 "$stateChangeSuccess" 监听你的 header 控制器中的状态

所以你只需要为你的标题声明一个控制器。并在您的标头控制器中添加类似这样的内容。

 $scope.$on('$stateChangeSuccess', function () {
    // Do what you want for example check if the current state is home with $state.is('home');
 });

不要忘记在你的模板中声明你的控制器

<div data-ng-controller="HeaderController" data-ng-include="'/modules/core/views/header.client.view.html'"></div>

<div id="page-content" class="clearfix" fit-height>
  <div id="wrap" data-ui-view="" class="mainview-animation"></div>
</div>

【讨论】：