Двустороннее связывание данных между двумя вложенными контроллерами Angular.js

Question

Мне любопытно, существует ли подходящий способ, с помощью которого нужно обрабатывать/реализовывать привязку данных между двумя вложенными контроллерами. Позвольте мне объяснить сценарий.

У меня есть formController, в котором есть элементы формы. Одним из элементов формы является мультиселективный виджет, для которого я создал частичный html, который я могу использовать в других местах, и этот частичный запуск с отдельным контроллером позволяет называть его multiSelectController (обратите внимание: этот контроллер/частичный/вид вложен в form/formController).

То, что я хочу, - иметь формуController (которая имеет данные), передавать в список «выбранных» элементов, например [1, 3, 7, 10], в частичный мультиспектр, который будет затем сможете визуализировать выбранные элементы. И в то же время, когда элемент отменяется или выбирается из частичной частичной части, я хочу, чтобы иметь возможность передавать новый выбранный список в formController/scope (так что я могу отобразить высказывание 1, 3, 5 теперь выбрано).

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

Answer 1

Лучший способ согласно мне:

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

   angular.service("dataService", function() { 
   
       this.value1 = ""; 
       this.value2 = ""; 
   }); 
   

2. ссылка, что сервис в ваших контроллерах, сохраняя их ссылку в области.

   angular.controller("myCntrl1", function($scope, dataService) { 
       $scope.dataService = dataService; 
   }); 
   
   
   angular.controller("myCntrl2", function($scope, dataService) { 
       $scope.dataService = dataService; 
   }); 
   

3. Теперь в вашем HTML, вы ссылаетесь все модальные переменные, используя ссылку на службу:

   // Controller 1 view 
       <div ng-controller="myCntrl1"> 
        <input type="text" ng-model="dataService.value1" /> 
       </div> 
   
       // Controller 2 view 
       <div ng-controller="myCntrl2"> 
        The value entered by user is {{dataService.value1}} 
       </div> 
   

Answer 2

Поскольку formController является родительский контроллер, вам не нужно беспокоиться о доступе к своей модели/varaibales, просто добавьте $ parent в сферу охвата ребенка для доступа к любому родительскому свойству

$scope.$parent.someProperty 

Итак, если yo u измените или обновите эту переменную, она также автоматически обновится в области родителя.