$ rooteScope не работает в AngularJS

Question

Кто-то, пожалуйста, дайте мне представление, как это решить. В моем основном файле я использую функцию startEdit ($ index), которая захватывает входное значение, которое должно быть изменено, и перенаправляет меня на частичное редактирование. Здесь я печатаю новый текст в поле ввода и использую save() для сохранения нового значения, а затем перенаправляю обратно в основное представление, где я могу увидеть новый текст.

Проблема в том, что я не получаю в функции save() новое значение для $ rootScope.siteBox; , Я получаю то же старое значение, даже в функции $ watch, я вижу, что переменная меняется.

Я пробовал много решений, но без результата. Кто-то, пожалуйста, дайте руку и скажите мне, что не так.

JS FILE

angular.module('maintenance', ['ngRoute']) 
    .controller('siteEditCtrl', SiteEditCtrl) 
    .controller('mainCtrl', MainCtrl) 
    .controller('addCtrl', AddCtrl) 
    .controller('editCtrl', EditCtrl) 
    .controller('deteleCtrl', DeteleCtrl) 
    .config(function($routeProvider) { 
     $routeProvider. 
     when('/', { 
      templateUrl: 'views/lists.html', 
      controller: 'mainCtrl' 
     }) 
     .when('/add', { 
      templateUrl: 'views/add.html', 
      controller: 'addCtrl' 
     }) 
     .when('/edit', { 
      templateUrl: 'views/edit.html', 
      controller: 'editCtrl' 
     }) 
     .when('/detele', { 
      templateUrl: 'views/detele.html', 
      controller: 'deteleCtrl' 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
    }); 

function SiteEditCtrl($scope, $location, $rootScope) { 
    $rootScope.sites = sites; 
    $rootScope.selected = -1; 

    $scope.startAdd = function() { 
     $location.path("/add"); 
    }; 

    $scope.startEdit = function(index) { 
     $rootScope.selected = index; 
     $rootScope.siteBox = $rootScope.sites[index]; 
     //console.log($rootScope.siteBox); 
     $location.path("/edit"); 
    }; 
} 

function EditCtrl($scope, $location, $rootScope) { 
    $scope.$watch('siteBox', function(newValue, oldValue) { 
     //console.log(oldValue); 
     //console.log(newValue); 
    }); 
    $scope.save = function() { 
     console.log($rootScope.siteBox); 
     $rootScope.sites[$rootScope.selected] = $rootScope.siteBox; 
     $location.path("#/"); 
    }; 
} 

Общий вид в конфигурации (/)

  <div class="row"> 
      <div class="col-sm-12"> 
        <a class="btn btn-primary btn-lg" ng-click="startAdd()"> 
         Add new dive 
        </a> 
      </div> 
     </div> 
     <h2>List of Dive Sites</h2> 
     <div class="row" ng-repeat="site in sites" 
       ng-class="{oddRow: $index % 2 == 0}"> 
      <div class="col-sm-8"> 
       <h4>{{$index + 1}}: {{site}}</h4> 
      </div> 
      <div class="col-sm-4" style="margin-top: 5px;"> 
       <div class="pull-right"> 
        <button class="btn btn-warning btn-sm" ng-click="startEdit($index)"> 
         Edit 
        </button> 
        <button class="btn btn-danger btn-sm" ng-click="startRemove($index)"> 
         Delete 
        </button> 
       </div> 
      </div> 
     </div> 

Edit зрения в конфигурации (/ редактирования)

 <h3>Edit the dive site name</h3> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <input type="text" class="form-control input-lg" placeholder="site name" ng-model="siteBox"> 
      </div> 
     </div> 
     <div class="row" style="margin-top: 12px;"> 
      <div class="col-sm-6"> 
       <button class="btn btn-succes btn" ng-disabled="siteBox==''" ng-click="save()"> 
        Save 
       </button> 
       <button class="btn btn-warning btn" ng-click="cancel()"> 
        Cancel 
       </button> 
      </div> 
     </div> 

Answer 1

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

Answer 2

Это классический случай нарушения "dot rule" для ng-модели.

эффективно, имея ng-model="siteBox" в разметке, когда входное значение получает изменяется, siteBox свойство устанавливается на рамки для editCtrl, а не на $rootScope, как вы ожидаете.

Вместо этого используйте $rootScope.data.siteBox в коде контроллера и data.siteBox в представлении кода вместо $rootScope.siteBox/siteBox, так что вы установите свойство на нужном объекте. Обязательно инициализируйте $rootScope.data пустым объектам на ранней стадии.