AngularJS UI路由器$ state.go（'^'）只在地址栏URL改变，但不加载器 [英] AngularJS ui-router $state.go('^') only changing URL in address bar, but not loading controller
本文介绍了AngularJS UI路由器$ state.go（'^'）只在地址栏URL改变，但不加载器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想创建一个的Todo应用程序与angularjs UI的路由器。它有2列：
- 专栏1：待办事项列表
- 2列：藤堂细节或藤编辑表单
在编辑和创建控制器保存的Todo之后，我想重新加载列表中显示相应的改变。问题：打完电话后 $ state.go（'^'）创建或更新待办事项时，在浏览器的URL变回 / API / TODO ，但不执行的ListCtrl，即 $ scope.search 不叫，因此待办事项列表（更改项目）没有检索到，也不是第一个待办事项的细节显示在第2列（相反，它变为空白）。
我甚至试过 $ state.go（'^'，$ stateParams，{重载：真的，继承：假的，通知：假}）; ，没有运气
我怎样才能做一个过渡状态，因此控制器eventuall被执行？
来源：
VAR TodoApp = angular.module（'TodoApp'，['ngResource'，'ui.router']）
的.config（函数（$ stateProvider，$ urlRouterProvider）{
$ urlRouterProvider.otherwise（'/ API / TODO'）; $ stateProvider
.STATE（'TODO'，{
网址：'/ API /待办事项，
控制器：'的ListCtrl'，
templateUrl：/_todo_list.html
}）
.STATE（'todo.details'，{
网址：'/ {ID：[0-9] *}
观点：{
detailsColumn：{
控制器：'DetailsCtrl'，
templateUrl：/_todo_details.html
}
}
}）
.STATE（'todo.edit'，{
网址：'/编辑/：身份证'，
观点：{
detailsColumn：{
控制器：'EditCtrl'，
templateUrl：/_todo_edit.html
}
}
}）
.STATE（'todo.new'，{
网址：'/新，
观点：{
detailsColumn：{
控制器：'CreateCtrl'，
templateUrl：/_todo_edit.html
}
}
}）
; }）
;TodoApp.factory（'托多斯'，函数（$资源）{
返回$资源（'/ API / TODO /：身份证'，{ID：'@id'}，{更新：{方法：把'}}）;
}）;VAR的ListCtrl =功能（$范围，$状态，托多斯）{
$ scope.todos = []; $ scope.search =功能（）{
Todos.query（功能（数据）{
$ scope.todos = $ scope.todos.concat（数据）;
$ state.go（'todo.details'，{ID：$ scope.todos [0] .ID}）;
}）;
}; $ scope.search（）;
};VAR DetailsCtrl =功能（$范围，$ stateParams，托多斯）{
$ scope.todo = Todos.get（{ID：$ stateParams.id}）;
};VAR EditCtrl =功能（$范围，$ stateParams，$状态，托多斯）{
$ scope.action ='编辑'; VAR ID = $ stateParams.id;
$ scope.todo = Todos.get（{ID：ID}）; $ scope.save =功能（）{
Todos.update（{ID：ID} $ scope.todo，函数（）{
$ state.go（'^'，$ stateParams，{重载：真的，继承：假的，通知：假}）;
}）;
};
};VAR CreateCtrl =功能（$范围，$ stateParams，$状态，托多斯）{
$ scope.action ='创建'; $ scope.save =功能（）{
Todos.save（$ scope.todo，函数（）{
$ state.go（'^'）;
}）;
};
};
解决方案
巨大的感谢拉迪姆科勒为指出 $范围继承。随着2小的变化，我设法解决这个问题。请参见下面code，我评论，我添加了额外的行。现在，它的工作原理就像一个魅力。
VAR TodoApp = angular.module（'TodoApp'，['ngResource'，'ui.router']）
的.config（函数（$ stateProvider，$ urlRouterProvider）{
$ urlRouterProvider.otherwise（'/ API / TODO'）; $ stateProvider
.STATE（'TODO'，{
网址：'/ API /待办事项，
控制器：'的ListCtrl'，
templateUrl：/_todo_list.html
}）
.STATE（'todo.details'，{
网址：'/ {ID：[0-9] *}
观点：{
detailsColumn：{
控制器：'DetailsCtrl'，
templateUrl：/_todo_details.html
}
}
}）
.STATE（'todo.edit'，{
网址：'/编辑/：身份证'，
观点：{
detailsColumn：{
控制器：'EditCtrl'，
templateUrl：/_todo_edit.html
}
}
}）
.STATE（'todo.new'，{
网址：'/新，
观点：{
detailsColumn：{
控制器：'CreateCtrl'，
templateUrl：/_todo_edit.html
}
}
}）
; }）
;TodoApp.factory（'托多斯'，函数（$资源）{
返回$资源（'/ API / TODO /：身份证'，{ID：'@id'}，{更新：{方法：把'}}）;
}）;VAR的ListCtrl =功能（$范围，$状态，托多斯）{
$ scope.todos = []; $ scope.search =功能（）{
Todos.query（功能（数据）{
$ scope.todos = $ scope.todos（数据）; //没有concat，则只是简单地覆盖
如果（0℃; $ scope.todos.length）{//添加这个问题，以及避免过多索引，如果没有的Todo是present
$ state.go（'todo.details'，{ID：$ scope.todos [0] .ID}）;
}
}）;
}; $ scope.search（）;
};VAR DetailsCtrl =功能（$范围，$ stateParams，托多斯）{
$ scope.todo = Todos.get（{ID：$ stateParams.id}）;
};VAR EditCtrl =功能（$范围，$ stateParams，$状态，托多斯）{
$ scope.action ='编辑'; VAR ID = $ stateParams.id;
$ scope.todo = Todos.get（{ID：ID}）; $ scope.save =功能（）{
Todos.update（{ID：ID} $ scope.todo，函数（）{
$ scope.search（）; //添加此行
//$state.go('^'）; //当$ scope.search（）改变了状态，这甚至没有必要的。
}）;
};
};VAR CreateCtrl =功能（$范围，$ stateParams，$状态，托多斯）{
$ scope.action ='创建'; $ scope.save =功能（）{
Todos.save（$ scope.todo，函数（）{
$ scope.search（）; //添加此行
//$state.go('^'）; //当$ scope.search（）改变了状态，这甚至没有必要的。
}）;
};
};
I am trying to create a "Todo App" with angularjs ui-router. It has 2 columns:
- Column 1: list of Todos
- Column 2: Todo details or Todo edit form
In the Edit and Create controller after saving the Todo I would like to reload the list to show the appropriate changes. The problem: after calling $state.go('^') when the Todo is created or updated, the URL in the browser changes back to /api/todo, but the ListCtrl is not executed, i.e. $scope.search is not called, hence the Todo list (with the changed items) is not retrieved, nor are the details of the first Todo displayed in Column 2 (instead, it goes blank).
I have even tried $state.go('^', $stateParams, { reload: true, inherit: false, notify: false });, no luck.
How can I do a state transition so the controller eventuall gets executed?
Source:
var TodoApp = angular.module('TodoApp', ['ngResource', 'ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/api/todo');
$stateProvider
.state('todo', {
url: '/api/todo',
controller: 'ListCtrl',
templateUrl: '/_todo_list.html'
})
.state('todo.details', {
url: '/{id:[0-9]*}',
views: {
'detailsColumn': {
controller: 'DetailsCtrl',
templateUrl: '/_todo_details.html'
}
}
})
.state('todo.edit', {
url: '/edit/:id',
views: {
'detailsColumn': {
controller: 'EditCtrl',
templateUrl: '/_todo_edit.html'
}
}
})
.state('todo.new', {
url: '/new',
views: {
'detailsColumn': {
controller: 'CreateCtrl',
templateUrl: '/_todo_edit.html'
}
}
})
;
})
;
TodoApp.factory('Todos', function ($resource) {
return $resource('/api/todo/:id', { id: '@id' }, { update: { method: 'PUT' } });
});
var ListCtrl = function ($scope, $state, Todos) {
$scope.todos = [];
$scope.search = function () {
Todos.query(function (data) {
$scope.todos = $scope.todos.concat(data);
$state.go('todo.details', { id: $scope.todos[0].Id });
});
};
$scope.search();
};
var DetailsCtrl = function ($scope, $stateParams, Todos) {
$scope.todo = Todos.get({ id: $stateParams.id });
};
var EditCtrl = function ($scope, $stateParams, $state, Todos) {
$scope.action = 'Edit';
var id = $stateParams.id;
$scope.todo = Todos.get({ id: id });
$scope.save = function () {
Todos.update({ id: id }, $scope.todo, function () {
$state.go('^', $stateParams, { reload: true, inherit: false, notify: false });
});
};
};
var CreateCtrl = function ($scope, $stateParams, $state, Todos) {
$scope.action = 'Create';
$scope.save = function () {
Todos.save($scope.todo, function () {
$state.go('^');
});
};
};
解决方案
Huge thanks for Radim Köhler for pointing out that $scope is inherited. With 2 small changes I managed to solve this. See below code, I commented where I added the extra lines. Now it works like a charm.
var TodoApp = angular.module('TodoApp', ['ngResource', 'ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/api/todo');
$stateProvider
.state('todo', {
url: '/api/todo',
controller: 'ListCtrl',
templateUrl: '/_todo_list.html'
})
.state('todo.details', {
url: '/{id:[0-9]*}',
views: {
'detailsColumn': {
controller: 'DetailsCtrl',
templateUrl: '/_todo_details.html'
}
}
})
.state('todo.edit', {
url: '/edit/:id',
views: {
'detailsColumn': {
controller: 'EditCtrl',
templateUrl: '/_todo_edit.html'
}
}
})
.state('todo.new', {
url: '/new',
views: {
'detailsColumn': {
controller: 'CreateCtrl',
templateUrl: '/_todo_edit.html'
}
}
})
;
})
;
TodoApp.factory('Todos', function ($resource) {
return $resource('/api/todo/:id', { id: '@id' }, { update: { method: 'PUT' } });
});
var ListCtrl = function ($scope, $state, Todos) {
$scope.todos = [];
$scope.search = function () {
Todos.query(function (data) {
$scope.todos = $scope.todos(data); // No concat, just overwrite
if (0 < $scope.todos.length) { // Added this as well to avoid overindexing if no Todo is present
$state.go('todo.details', { id: $scope.todos[0].Id });
}
});
};
$scope.search();
};
var DetailsCtrl = function ($scope, $stateParams, Todos) {
$scope.todo = Todos.get({ id: $stateParams.id });
};
var EditCtrl = function ($scope, $stateParams, $state, Todos) {
$scope.action = 'Edit';
var id = $stateParams.id;
$scope.todo = Todos.get({ id: id });
$scope.save = function () {
Todos.update({ id: id }, $scope.todo, function () {
$scope.search(); // Added this line
//$state.go('^'); // As $scope.search() changes the state, this is not even needed.
});
};
};
var CreateCtrl = function ($scope, $stateParams, $state, Todos) {
$scope.action = 'Create';
$scope.save = function () {
Todos.save($scope.todo, function () {
$scope.search(); // Added this line
//$state.go('^'); // As $scope.search() changes the state, this is not even needed.
});
};
};
这篇关于AngularJS UI路由器$ state.go（'^'）只在地址栏URL改变，但不加载器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
