Сообщайте два вида с одним контроллером в AngularJS

Question

Я использую UI-Router для Angular, и у меня есть отдельные виды для моего приложения: боковая панель и главная. Теперь мне нужно изменить какой-либо класс в главном представлении после некоторых действий, которые выполняются в виде боковой панели.

Итак, это мой код:

конфигурации

.state('app.area', { 
    url: '/area/:areaId', 
    views: { 
     '@': { 
      template: require('./app/generic/genericWithSidebar.html'), 
      controller: 'AreaCtrl' 
     }, 
     'main@app.area': { 
      template: require('./app/area/_area.html'), 
      controller: 'AreaCtrl', 
      controllerAs: 'CTRL', 
     }, 
     'sidebar@app.area': { 
      template: require('./app/area/_sidebar.html'), 
      controller: 'AreaCtrl', 
      controllerAs: 'CTRL', 
     } 
    }, 

контроллер

class AreaCtrl { 
    constructor($scope) { 
     "ngInject"; 

     this.$scope = $scope; 
     this.$scope.descriptionIsActive = false; 
    } 

    showAreaDescription() { 
     this.$scope.descriptionIsActive = !this.$scope.descriptionIsActive; 
    } 
} 

export default AreaCtrl; 

и просмотров за боковой и основной

// sidebar view 
<span ng-click="CTRL.showAreaDescription()">show more</span> 
// main view 
<div ng-class="{'active': CTRL.descriptionIsActive}"></div> 

Мне нужно общаться между представлениями, а не контроллерами, у меня есть один контроллер.

Answer 1

«Правильный» решение зависит от того, что именно изменилось в вашем главном экране, что вызывает изменение в навигации.

Как я только answered here, это, как правило, плохой знак, если вам нужны контроллеры, чтобы «разговаривать» друг с другом. Это часто означает, что у вас должен быть service, который заботится о данных/состоянии, с которым вы хотите привязываться в обоих представлениях.

Если, однако, ваше изменение действительно просто глобальная косметическая навигационная вещь (я не могу придумать пример, но я не хочу говорить, что это невозможно), «глобальный» NavigaitonController (например, на вашем body) может быть правильным. Но я сомневаюсь.

Итак, мое предложение: подумайте о том, какие данные приводят к изменению, обрабатывают состояние этих данных в своей собственной службе и привязывают к этому свойству службы, где он вам нужен.

Answer 2

Вы можете определить свой контроллер вне опции views так, чтобы он загружался только один раз при загрузке.

stateProvider.state("app.area",{ 
    url:'/app.area', 
    templateUrl: 'app_area_frame.html', 
    controller:'AreaCtrl', 
    controllerAs: 'CTRL', 
    views:{ 
     'main':{ 
      template: require('./app/area/_area.html') 
     }, 
     'sidebar':{ 
      template: require('./app/area/_sidebar.html') 
     } 
    } 

}) 

Вложенные просмотров за UI-routerdocs

Answer 3

Состояние должно быть инкапсулировано службами, поэтому на самом деле, если у вас есть состояние, которое должно использоваться совместно с приложением, вы должны создать службу.

В качестве альтернативы вы можете иметь контроллер в более высокой области видимости, например, у вас есть контроллер для приложения, который затем может быть унаследован боковыми панелями и дочерними областями главной страницы.

Answer 4

Возможно, этот ответ не является точным ответом на ваш конкретный вопрос. Но с точки зрения архитектуры вы не должны использовать вложенные представления для обработки основного вида с боковой панелью.

Поскольку эта боковая панель должна быть одинаковой для всех состояний. Поэтому, если вы используете вложенные представления, вы должны указывать свою боковую панель каждый раз. Также вы должны написать код для боковой панели в каждом штате. Это не рекомендуется для разработки вашего приложения.

Настоятельно рекомендую вам пройти через это Q&A.

Тогда как проектировать?

Сделайте свою боковую панель простым шаблоном и используйте ng-include для визуализации части нижнего колонтитула.

<footer ng-include="'/sidebar.html'" ng-controller="sidebarController"></footer> 

Как вы можете видеть, что есть специальный контроллер для боковой панели, и вам не нужно дублировать код для каждого основного контроллера.