Angular JS - 更改路径，相同的控制器，不要重新加载范围

Question

我知道这里被问了很多次，我也找到了。但它不能解决我的问题。 情况就是这样。我有一个 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'
        }

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');

  }

});

当我点击添加按钮时，它会显示添加表单。当我输入组名并提交时，它应该在更改 url 后显示编辑表单，并在表单中填写组名。但是当我尝试时，由于 url 正在更改，因此 group 对象的值变为空。我在控制器中添加了以下内容，但不知道之后该做什么。

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

如何将最后一个路由的范围变量分配给当前路由范围。我也尝试在搜索时重新加载为 false，但它没有用。

Answer 1

这里可能有错误：

 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 变量...并且您想使用相同的控制器来做到这一点...

---

好的，要从最后一个控制器获取组，您已经完成了一半。您必须将组存储在某处，因为您在 $routeChange 侦听器中收到的 targetScopes 和 currentScopes 不指向范围。 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 可能不是保存该变量的最佳位置，但您也可以将它放在一个变量的角度常量中。