Angular JS - Change path, Same controller, don't reload scope

Question

I know it's been asked so many times here and I found it too. But it could not solve my problem. Here is the case. I have one AngularJS application. I have a list page. I have a button to add. When I click on add button, a pop-up window will come with a form. I want to change the URL when the pop-up comes but in the same controller. Also I would like to add some other buttons on each, some html display as popup-or other location, but same controller without reloading all scope when url changes.

What I have tried.

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'
        }

groups.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>

Controllers.js

WebClientApp.controller('GroupCtrl', function ($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');

  }

});

When I click on add button, it will show the add form. When I enter group name, and submit, it should show edit form after changing url with the group name filled in the form. But when I try, the value of group object becomes empty since the url is changing. I added the following in controller, but don't know what to do exactly after.

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

How to assign the scope variables of last route to present route scope. I tried reload on search to false also, But it didnt work.

victor · Answer 1 · 2014-06-10T09:32:14.147

There might be an error here :

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

There are probably some typos in the HTML template code you posted, but what you are basically doing is hiding the parent addGroupModal and showing the child editGroupModal. Remove the nesting and the tags like this:

   <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>

Here is the plunkr ( hit enter to submit the form): http://plnkr.co/edit/MGT8HZ4lpgVWCkWlt8Ak?p=preview

If this is what you want to acheive, honestly you are complicating things ... There are simpler solutions.

I see! What you want to acheive is to have a reference of the old group variable before the route was changed... And you want to do that using the same controller...

Ok, to get the group from the last controller, you are half way there . You have to store the group somewhere because the targetScopes and currentScopes you receive in the $routeChange listeners don't point to the scopes. 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);
});

I agree the rootScope might not be the best place to keep that variable, but you can also put it inside an angular constant of variable.

Actually I typed everything here because I tried before and it didnt work So I had to change back that doesnt change url. — iCode, Jun 10 '14 at 08:57
When I press enter, it is showing the edit group page. Thats working for me also. But the object group should remain same. Means in the edit group page, first text box with ng-mode group.name should show the value what I typed before. Only url should change, not scope. (Controller should not reload and empty the scope when i change url) — iCode, Jun 10 '14 at 09:01
It is better to use same controller. But how to get the object group from last rooute scope? — iCode, Jun 10 '14 at 09:04
Please confirm the latest update. Normally this should do the trick, altough a more elegant solution would be to use separate controllers. — victor, Jun 10 '14 at 10:41

Angular JS - Change path, Same controller, don't reload scope

1 Answers1