Question

我开始玩AngularJS，我不确定如何更新导航栏选择。我在index.html中有两件事，导航栏（带有我需要更新的标签）和带有ngView的div。

对于不同的视图，我使用ngRoute更改模板并将控制器附加到这些模板。但是对于导航栏，我不确定是否应该添加＆＃34; ng-controller =＆＃34; tabController＆＃34;在HTML中。这看起来不正确，因为我已经在检查视图的路径了，我会检查它两次。

以下是导航栏的代码和带视图的div，其中li具有类＆＃34;活动＆＃34;应该与div中显示的视图对齐：

<nav class="navbar navbar-default" ng-controller="tabController">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#/">Recetas Helper</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="#/">Home</a></li>
            <li class="active"><a href="#/helper">Helper</a></li>
            <li><a href="#/insert">Insertar</a></li>
            <li><a href="#/randomizer">Randomizer</a></li>
        </ul>
    </div>
</nav>
<div class="main-view" ng-view></div>

这是我的app.js代码，其中控制器和路径被检查：

var app = angular.module('confApp', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "partials/home.html",
            controller: "homeController"
        })
        .when("/helper", {
            templateUrl: "partials/helper.html",
            controller: "helperController"
        })
        .when("/insert", {
            templateUrl: "partials/insert.html"
        })
        .when("/randomizer", {
            templateUrl: "partials/randomizer.html"
        })
        .otherwise({
            templateUrl: "partials/ups.html"
        });
});


app.controller('tabController', function($scope) {...});

app.controller('homeController', function($scope) {...});

app.controller('helperController', function($scope) {...});

这是我第一次在SO中提出问题，所以请告诉我是否有任何重要信息丢失，或者是反对信息。谢谢！

Answer 1

根据我的理解，您基本上使用nav-bar并相应地更改路线。调用它Tab会使其更加混乱，因为 TAB 与导航栏不同。我的建议是：

将其重命名为Navigation Controller
如果您使用的是1.5及更高版本，请创建一个组件，因为它们更适合新版本的AngularJS 1.X
对于您已共享的上述代码，您可以使用$location检查active并相应地将div课程应用于所选的ng-class。这将是唯一的解决方案，因为您需要将active类应用于div，这将按照routing

休息一切看起来很好

AngularJS - 使用两个不同的控制器？

1 个答案: