我知道在这里被问了很多次,我也发现了。但它无法解决我的问题。 情况就是这样。我有一个AngularJS应用程序。 我有一个列表页面。我有一个添加按钮。当我点击“添加”按钮时,弹出窗口将显示一个表单。我想在弹出窗口时更改URL,但是在同一个控制器中。 另外我想在每个按钮上添加一些其他按钮,一些html显示为弹出窗口或其他位置,但是相同的控制器在网址更改时不重新加载所有范围。
我尝试了什么。
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(&#39; GroupCtrl&#39;,功能($ 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,但它没有用。
答案 0 :(得分:0)
这里可能有错误:
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可能不是保存该变量的最佳位置,但您也可以将其置于变量的角度常量内。