在 Angular 控制器中切换导航栏。 $scope 错误？

Question

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

你可以在这里找到这个应用程序：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 中要在单击导航栏的 link 时折叠导航栏，我将此代码片段放入 navigation-控制器 (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 后一切正常所以我认为问题与 angular 控制器的范围有关。

谁能告诉我如何将我的导航栏放入 navigation.html 并在我的控制器中切换导航栏折叠状态？

Answer 1

我发现了我的错误。 ng-include 创建一个新的范围。因为我在模板中有 navCollapsed = !navCollapsed，angular 在此子范围中创建了一个新的 navCollapsed。因此导航控制器中的更改不会产生任何影响。我通过调用在 navigation-Controller

中定义的函数 toggleNavCollapsed() 解决了这个问题

在 Angular 控制器中切换导航栏。 $scope 错误？

Toggle Navbar in Angular Controller. Wrong $scope?

javascript

navigation

navbar

angularjs

angularjs-scope