angularjs 中的动态 header/menu

Question

在转换现有 angular 站点时，我遇到了一个烦人的问题。最初的症状是某个控制器不是运行它在登录后立即初始化功能。我记录并跟踪，最终我意识到这是页面的设计缺陷。本质上，index.html 包含 <header>、<ng-view> 和 <footer>。我想在登录后评估 header 中的几个 ng-if 属性，但由于视图是唯一重新加载的东西，因此它没有重新初始化 header 控制器，因此不会更新 ng-if 值。

然后我想起了 ngInclude，这似乎是完美的解决方案，直到我把它连接起来并意识到它也不起作用。它第一次加载模板，并且在视图更改时不会重新初始化。于是我有了一个好主意，将 HeaderController 传递给另一个控制器或服务，并通过某种代理来控制这个顽固的布尔值。那也没有用。然后我尝试将一个函数和一个布尔值放入另一个服务中，并在 header 控制器中镜像属性，但到目前为止我还没有得到这个工作。

我已经对索引中的多个视图进行了大量研究，到目前为止，我听到了很多关于此的信息 ui-router，但我仍然不相信这是我想要的方式。这似乎不是一个简单的解决方案。我也没有尝试将 ng-include 放入模板中，因为那时我觉得那会及时回到我们每次更改菜单时都必须更新 100 页的时候。

我为此浪费了一整天的时间。如果有人能告诉我如何在我的 header 控制器中触发这个属性的评估，我想在其他模板之外使用它，请告诉我！

Answer 1

好的，所以您需要在 HeaderController 中知道视图何时重新加载。有多种方法可以做到这一点，但在这种特殊情况下，更容易也可能更正确的方法是使用事件。

因此，当您刷新视图时，只需执行此操作，假设您需要 ob1 和 ob2 变量的新值。

// ViewController
$rootScope.$emit('viewRefresh', {ob1: 'newvalue1', ob2: 'newvalue2'});

并且在您的 HeaderController 中您需要监听该事件，并在您的 $scope 上设置这些属性的新值（如果您没有使用 controller as 语法）。

// HeaderController
$rootScope.$on('viewRefresh', function onRefresh(event, data) {
    $scope.ob1 = data.ob1;
    $scope.ob2 = data.ob2;
})

另一个解决方案 通过服务共享 Promise（使用 $q）

function HeaderService($q) {
    var defer = $q.defer();
    return {
        getPromise: function() {return defer.promise},
        notify: function(data) {defer.notify(data)}
    }
}

function HeaderController(HeaderService) {
    var vm = this;
    HeaderService.getPromise().then(function(data) {
        vm.ob1 = data.ob1;
        vm.ob2 = data.ob2;
    })
}


function ViewController(HeaderService) {
    var data =  {ob1: 'newvalue1', ob2: 'newvalue2'};
    HeaderService.notify(data)
}

angularjs 中的动态 header/menu

dynamic header/menu in angularjs

angularjs

angularjs-ng-include

ng-view