Question

我已经为学习目的创建了一个小的webapp。

您可以在此处找到此应用：https://github.com/Yannic92/ShoppingList

我对角度及其范围有疑问。在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 要在点击导航栏的链接时折叠导航栏，我将此代码段放入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后，一切正常，所以我认为这个问题与角度控制器的范围有关。

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

Answer 1

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

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

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

1 个答案: