在角度控制器中切换导航栏。错误$范围？答案

【问题标题】：Toggle Navbar in Angular Controller. Wrong $scope?在角度控制器中切换导航栏。错误$范围？
【发布时间】：2015-06-11 03:39:57
【问题描述】：

我创建了一个用于学习目的的小型网络应用程序。

你可以在这里找到这个应用程序：https://github.com/Yannic92/ShoppingList

我对 Angular 及其范围有疑问。在 index.html (https://github.com/Yannic92/ShoppingList/blob/master/src/main/resources/public/index.html) 我有一个导航栏。我的第一种方法是把这个导航栏放到一个单独的 HTML 文件中，并使用 ng-include 来包含它，因为我不想在我的 index.html 中有那么多代码。

第一种方法

我的 index.html 看起来像这样：

<html ng-app="shopping">
<head lang="de">
    ...
    <title>Einkaufsliste</title>
</head>
<body ng-controller="navigation">
    <navbar class="navbar-default navbar-fixed-top" ng-include="'navigation/navigation.html'"></navbar>
    <div class="content col-md-offset-1 col-md-10 col-lg-offset-2 col-lg-8" ng-view></div>
</body>
</html>

类似的导航栏目前位于我在 github 上的代码中的 <navbar> 元素中，位于 navigation/navigation.html 要在单击导航栏的链接时折叠导航栏，我将此代码 sn-p 放入 navigation-controller (https://github.com/Yannic92/ShoppingList/blob/master/src/main/resources/public/navigation/navigation.js)：

    $scope.$on('$routeChangeSuccess', function () {
        $scope.navCollapsed = true;
    })

代码本身有效，但对导航栏没有任何影响。它不会崩溃。

将 navbar.html 内容放入 index.html 后一切正常，所以我认为问题与 angulars 控制器的范围有关。

谁能给我一个提示，如何将我的导航栏放入 navigation.html 并在我的控制器内切换导航栏折叠状态？

【问题讨论】：

标签： javascript angularjs navigation angularjs-scope navbar

【解决方案1】：

我发现了我的错误。 ng-include 创建一个新范围。而且因为我在模板中有navCollapsed = !navCollapsed，所以angular 在这个childscope 中创建了一个新的navCollapsed。因此导航控制器中的更改不会产生任何影响。我通过调用导航控制器中定义的函数toggleNavCollapsed()解决了这个问题

【讨论】：