Привязка к тому же массиву в другом разделе

Question

У меня есть следующий plnkr (хотя он не отображает данные): http://plnkr.co/edit/7jAzOftz9Yq6hXNts9kf?p=preview

У меня есть 2 Див разделы:

<div ng-controller="AddChoreController as chores"> 

<div class="row clearfix" ng-controller="AddChoreController as chores"> 

Что я m пытается сделать, это построить массив в 1 разделе, а затем повторно использовать массив в другом разделе. Я получаю, что я просто создаю экземпляр того же контроллера, мой вопрос в том, как при обновлении массива choreList.chores я могу показать его во втором разделе div?

Answer 1

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

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

 
app.controller('myController1', function($scope, myService) { 
 
    $scope.myService = myService; 
 
}); 
 

 
app.controller('myController2', function($scope, myService) { 
 
    $scope.myService = myService; 
 
}); 
 

 
app.service('myService', function() { 
 
    this.arr = []; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
<div ng-app='app'> 
 
    <div ng-controller='myController1'> 
 
    myController1 #1 
 
    <input ng-model="myService.arr"/> 
 
    {{ myService.arr }} 
 
    </div> 
 
    <div ng-controller='myController1'> 
 
    myController1 #2 
 
    <input ng-model="myService.arr"/> 
 
    {{ myService.arr }} 
 
    </div> 
 
    <div ng-controller='myController2'> 
 
    myController2 
 
    <input ng-model="myService.arr"/> 
 
    {{ myService.arr }} 
 
    </div> 
 
<div>