Angular JS — изменить путь, тот же контроллер, не перезагружать область

Я знаю, что это спрашивали здесь так много раз, и я тоже нашел это. Но это не могло решить мою проблему. Вот случай. У меня есть одно приложение AngularJS. У меня есть страница со списком. У меня есть кнопка добавить. Когда я нажимаю кнопку «Добавить», появляется всплывающее окно с формой. Я хочу изменить URL-адрес, когда появится всплывающее окно, но в том же контроллере. Также я хотел бы добавить некоторые другие кнопки на каждую, некоторые html-дисплеи в виде всплывающих окон или в другом месте, но тот же контроллер без перезагрузки всей области при изменении URL-адреса.

Что я пробовал.

app.js

var WebClientApp = angular.module('WebClientApp', [
                                    'ngCookies',
                                    'ngResource',
                                    'ngSanitize',
                                    'ui.bootstrap',
                                    'ngRoute'
                                  ]);
WebClientApp.config(function ($routeProvider) {
    $routeProvider
        .when('/groups/:template', {
            templateUrl: 'groups.html',
            controller: 'GroupCtrl'
        }

группы.html

<div>
<button ng-click="showAdd()">Add Group</button>
<div ng-include src="views/listpage.html">
<div ng-if="addGroupModal" class="popup-modal">
 <form name="addGroup" ng-submit="addandEditGroup()">
       <input type="text" ng-model="group.name">
 </form>
<div>
<div ng-if="editGroupModal" class="popup-modal">
 <form name="editGroup" ng-submit="saveGroup()">
       <input type="text" ng-model="group.name">
       <input type="text" ng-model="group.desc">
       <input type="text" ng-model="group.id">
 </form>
<div>

Контроллеры.js

WebClientApp.controller('GroupCtrl', функция ($scope,$http, $location, $routeParams) {

$scope.group = {};

$scope.showAdd=function(){
   $location.path('/groups/add');
}

var template = $routeParams.template;
switch(template){
  case 'add':
         loadAddPage();
         break;
  case 'edit':
         loadEditPage();
         break;
  default:
         loadListPageHideAll();
         break;
}

  function loadAddPage() {
    $scope.addGroupModal=true;
    $scope.editGroupModal=false;
  }

  function loadEditPage(){
    $scope.addGroupModal=false;
    $scope.editGroupModal=true;
  }

  function loadListPageHideAll() {
    $scope.addGroupModal=false;
    $scope.editGroupModal=false;
    // connect to server and list all groups
  }

  $scope.addandEditGroup = function() {
    $location.path('/groups/edit');
  }

  $scope.saveGroup = function() {
    // Save group with $scope.group.
    $location.path('/groups');

  }

});

Когда я нажимаю кнопку добавления, он показывает форму добавления. Когда я ввожу имя группы и отправляю, оно должно отображать форму редактирования после изменения URL-адреса с именем группы, заполненным в форме. Но когда я пытаюсь, значение группового объекта становится пустым, поскольку URL-адрес меняется. Я добавил следующее в контроллер, но не знаю, что делать дальше.

$scope.$on('$routeChangeStart', function(event, present, last) {
        console.log(event,present,last);
});

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


angularjs ngroute angularjs-scope
person iCode    schedule 10.06.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Здесь может быть ошибка:

 function loadEditPage(){
    $scope.addGroupModal=false;
    $scope.editGroupModal=true;
 }

Вероятно, в коде шаблона HTML, который вы разместили, есть некоторые опечатки, но в основном вы скрываете родительский addGroupModal и показываете дочерний editGroupModal. Удалите вложенность и теги следующим образом:

   <div ng-if="addGroupModal" class="popup-modal">
                <form name="addGroup" ng-submit="addandEditGroup()">
                    <input type="text" ng-model="group.name">
                </form>
   </div>
   <div>
            <div ng-if="editGroupModal" class="popup-modal">
                     <form name="editGroup" ng-submit="saveGroup()">
                          <input type="text" ng-model="group.name">
                          <input type="text" ng-model="group.desc">
                          <input type="text" ng-model="group.id">
                        </form>

            </div>
     </div>

Вот plunkr (нажмите Enter, чтобы отправить форму): http://plnkr.co/edit/MGT8HZ4lpgVWCkWlt8Ak?p=preview

Если это то, чего вы хотите добиться, честно говоря, вы все усложняете ... Есть более простые решения.

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

Хорошо, чтобы получить группу от последнего контроллера, вы уже на полпути. Вы должны где-то хранить группу, потому что targetScopes и currentScopes, которые вы получаете в слушателях $routeChange, не указывают на области. http://plnkr.co/edit/HfK3fhVtZ4bxHtpiFR3B?p=preview

$scope.group = $rootScope.group || {};

$scope.$on('$routeChangeStart', function(event, present, last) {
  console.log('start change route');
  $rootScope.group = event.currentScope.group;
  console.log('target scope group ',event.currentScope.group);
});

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

person victor    schedule 10.06.2014
comment
На самом деле я набрал все здесь, потому что я пробовал раньше, и это не сработало, поэтому мне пришлось вернуться, что не меняет URL-адрес. - person iCode; 10.06.2014
comment
Когда я нажимаю ввод, он показывает страницу группы редактирования. Это работает и для меня. Но группа объектов должна остаться прежней. Значит, на странице редактирования группы первое текстовое поле с ng-mode group.name должно показывать значение, которое я ввел ранее. Должен измениться только URL-адрес, а не область действия. (Контроллер не должен перезагружать и очищать область, когда я меняю URL-адрес) - person iCode; 10.06.2014
comment
Лучше использовать тот же контроллер. Но как получить группу объектов из последней области маршрута? - person iCode; 10.06.2014
comment
Пожалуйста, подтвердите последнее обновление. Обычно это должно сработать, хотя более элегантным решением было бы использование отдельных контроллеров. - person victor; 10.06.2014