AngularJS — использовать два разных контроллера?

Я начинаю играть с AngularJS и не знаю, как обновить выбор панели навигации. У меня есть 2 вещи в index.html: панель навигации (с вкладками, которые мне нужно обновить) и div с ngView.

Для разных представлений я использую ngRoute для изменения шаблонов и присоединения контроллера к этим шаблонам. Однако для навигационной панели я не уверен, следует ли мне просто добавить "ng-controller="tabController" в HTML. Это не кажется правильным, так как я уже проверяю маршрут для представления, и я бы дважды проверив.

Вот мой код для панели навигации и div с представлением, где li с классом «активный» должен быть выровнен с представлением, показанным в 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, поэтому, пожалуйста, сообщите мне, если какая-либо важная информация отсутствует или наоборот. Спасибо!!


person tonyjojo    schedule 17.04.2018    source источник
comment
Привет и добро пожаловать в SO! Не очень понятно, чего вы хотите здесь добиться, что именно вы имеете в виду под обновлением выбора вкладки? Я тоже этого не понимаю, мне все равно нужно проверить маршрут, чтобы изменить активную вкладку. Можете ли вы отредактировать свой вопрос, чтобы добавить точности? Помните, что мы ничего не знаем о вашем проекте, не стесняйтесь иллюстрировать то, что вы говорите, примерами кода.   -  person Kaddath    schedule 17.04.2018
comment
Спасибо @Kaddath, я пытался объяснить это лучше   -  person tonyjojo    schedule 17.04.2018


Ответы (1)


Насколько я понимаю, вы в основном используете nav-bar и соответственно меняете маршруты. Если его назвать Tab, это сделает его более запутанным, так как TAB отличается от панели навигации. Мое предложение:

  1. Переименуйте его в Navigation Controller
  2. Если вы используете 1.5 и выше, создайте компоненты, так как они лучше подходят для новых версий AngularJS 1.X.
  3. Для приведенного выше кода, которым вы поделились, вы можете проверить $location и, соответственно, применить класс active к выбранному div, используя ng-class. Это будет единственное решение, так как вам нужно применить класс active к div, который будет отображаться в соответствии с routing.

В остальном все выглядит нормально

person Shashank Vivek    schedule 17.04.2018
comment
Спасибо @Shasank Vivek, это сработало с использованием $location, но только при первом доступе к странице она не обновляется при изменении URL-адреса, есть идеи, почему? - person tonyjojo; 17.04.2018
comment
в navigationController у меня есть: $scope.url = $location.$$url; // и в каждом li у меня есть ng-class={active: url == '/helper'} для каждого случая - person tonyjojo; 17.04.2018
comment
@tonyjojo: да, это происходит потому, что контроллер уже загружен и поэтому содержит $location данные своей первой загрузки. Для вашей ситуации вы можете обратиться к stackoverflow.com/questions/14765719/ . Вам нужно зафиксировать событие при изменении маршрута - person Shashank Vivek; 17.04.2018
comment
Еще раз спасибо @Shashank Vivek! - person tonyjojo; 18.04.2018