保留 angularjs ui-路由器状态和来自 ui-router-extras 的粘性状态所需的最低限度是多少？
What is the minimum needed to preserve angularjs ui-router states with sticky states from ui-router-extras?
我有一个页面，其中包含分布在多个选项卡上的 HTML 个表单元素。我希望用户能够在不丢失他在表单元素上输入的数据的情况下切换选项卡（而且我还想保存不必要的数据重新加载）。而且我仍然希望能够将 link 传递给特定选项卡。
听起来像 ui-额外的粘性状态应该完全符合我的需要。除了我一直非常不成功地让它工作。
我研究了 example source code and when I fire up the example I e.g. set a breakpoint with firebug in the constructor of the inventory controller found in Line 57 in controllers.js，我看到构造函数只被触发一次。然而，我的控制器构造函数被一次又一次地触发，我的应用程序的行为就像不存在粘性状态一样，尽管如果我启用粘性状态调试，它会告诉我它正在做某事（停用和重新激活状态）。
我发现有人在 this answer 的评论中指出粘性状态仅适用于命名视图，因此我尝试为我的视图命名，但没有任何区别。
我尝试在我的选项卡前插入明确的 "root state"。
我尝试通过 ng-controller 或控制器定义在状态中插入控制器。
github 上的示例是一个很好的炫耀，但远不止于此，而且很难看出实际需要什么，不需要什么。
什么是开始使用粘性状态所需的最小示例？（奖励：我的代码有什么问题？）。
此处供参考 plunkr with my failed attempt（查看历史以查看之前尝试的选择）。
这是我当前失败的源代码：
var log = '';
function mkController(msg) {
return function($scope) {
// This is the constructor of a controller
// I'd expect this constructor to the first time a state is loaded.
// When switching to a sister state and back it should not be called again.
if (!$scope.random) {
// I expect the $scope object to be retained when changing states for and
// back. So even if my assumption that the controller will be persistent
// would be wrong this is to check whether the $scope survives.
// If the scope survives the random number will be initialized only once
// and then it won't change anymore:
$scope.random = Math.round(Math.random()*10000);
}
// This log will tell us how often the controller constructor has been called
// (Should be only once, I think)
log += 'creating: ' + msg + '\n';
this.message = log;
}
}
angular.module('plunker', ['ui.router', 'ct.ui.router.extras.sticky', 'ct.ui.router.extras.dsr'])
.controller('ControllerA', mkController('ControllerA'))
.controller('ControllerB', mkController('ControllerB'))
.run(function($templateCache) {
$templateCache.put('root.html', '<div ui-view="myview"></div>');
$templateCache.put('templateA.html', '<div ng-controller="ControllerA as controller"><pre>Random: {{random}}, Message (templateA): {{controller.message}}</pre></div>');
$templateCache.put('templateB.html', '<div ng-controller="ControllerB as controller"><pre>Random: {{random}}, Message (templateB): {{controller.message}}</pre></div>');
})
.config(function($stateProvider) {
$stateProvider
.state('root', {
url: '/',
templateUrl: 'root.html'
}).state('root.stateA', {
url: '/stateA',
views: {
myview: {
templateUrl: 'templateA.html',
}
},
sticky: true,
deepStateRedirect: true
}).state('root.stateB', {
url: '/stateB',
views: {
myview: {
templateUrl: 'templateB.html',
}
},
sticky: true,
deepStateRedirect: true
});
})
.config(function($stickyStateProvider) {
$stickyStateProvider.enableDebug(true);
});
我想通了：
- 首先，我没有意识到命名视图的实际用途：每个选项卡有一个单独的视图。
- 其次，我没有意识到我需要自己隐藏和显示视图。
演示页面中都提到了两者，但我不得不承认我并没有真正仔细阅读演示页面的文本，因为我认为这只是关于这个特定演示的信息。
无论如何：这是一个我认为是让粘性状态运行所需的最低限度的例子：
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.3.12" src="https://code.angularjs.org/1.3.12/angular.js" data-require="angular.js@1.3.x"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>
<script src="ui-router-extras.js"></script>
<script src="app.js"></script>
</head>
<body>
<ul class="nav nav-tabs nav-tabs-head" role="tablist">
<li ui-sref-active="active"><a ui-sref="root.stateA" role="tab">StateA</a></li>
<li ui-sref-active="active"><a ui-sref="root.stateB" role="tab">StateB</a></li>
</ul>
<div ui-view="" />
</body>
</html>
JavaScript
var log = '';
function mkController(msg) {
return function($scope) {
// This is the constructor of a controller
// I'd expect this constructor to the first time a state is loaded.
// When switching to a sister state and back it should not be called again.
if (!$scope.random) {
// I expect the $scope object to be retained when changing states for and
// back. So even if my assumption that the controller will be persistent
// would be wrong this is to check whether the $scope survives.
// If the scope survives the random number will be initialized only once
// and then it won't change anymore:
$scope.random = Math.round(Math.random()*10000);
}
// This log will tell us how often the controller constructor has been called
// (Should be only once, I think)
log += 'creating: ' + msg + '\n';
this.message = 'Current msg: ' + msg + '\n\n' + log;
}
}
angular.module('plunker', ['ui.router', 'ct.ui.router.extras.sticky'])
.controller('ControllerA', mkController('ControllerA'))
.controller('ControllerB', mkController('ControllerB'))
.config(function($stateProvider) {
$stateProvider
.state('root', {
url: '/',
template: '<div ui-view="a" ng-show="$state.includes(\'root.stateA\')"></div><div ui-view="b" ng-show="$state.includes(\'root.stateB\')"></div>'
}).state('root.stateA', {
url: '/stateA',
views: {
'a@root': {
template: '<div ng-controller="ControllerA as controller"><h1>A</h1><pre>Random: {{random}}, Message (templateA): {{controller.message}}</pre></div>',
}
},
sticky: true
}).state('root.stateB', {
url: '/stateB',
views: {
'b@root': {
template: '<div ng-controller="ControllerB as controller"><h1>B</h1><pre>Random: {{random}}, Message (templateB): {{controller.message}}</pre></div>',
}
},
sticky: true
});
})
.config(function($stickyStateProvider) {
$stickyStateProvider.enableDebug(true);
})
.run(function ($rootScope, $state) {
$rootScope.$state = $state;
});
plunkr 上的演示
我有一个页面，其中包含分布在多个选项卡上的 HTML 个表单元素。我希望用户能够在不丢失他在表单元素上输入的数据的情况下切换选项卡（而且我还想保存不必要的数据重新加载）。而且我仍然希望能够将 link 传递给特定选项卡。
听起来像 ui-额外的粘性状态应该完全符合我的需要。除了我一直非常不成功地让它工作。
我研究了 example source code and when I fire up the example I e.g. set a breakpoint with firebug in the constructor of the inventory controller found in Line 57 in controllers.js，我看到构造函数只被触发一次。然而，我的控制器构造函数被一次又一次地触发，我的应用程序的行为就像不存在粘性状态一样，尽管如果我启用粘性状态调试，它会告诉我它正在做某事（停用和重新激活状态）。
我发现有人在 this answer 的评论中指出粘性状态仅适用于命名视图，因此我尝试为我的视图命名，但没有任何区别。
我尝试在我的选项卡前插入明确的 "root state"。
我尝试通过 ng-controller 或控制器定义在状态中插入控制器。
github 上的示例是一个很好的炫耀，但远不止于此，而且很难看出实际需要什么，不需要什么。
什么是开始使用粘性状态所需的最小示例？（奖励：我的代码有什么问题？）。
此处供参考 plunkr with my failed attempt（查看历史以查看之前尝试的选择）。
这是我当前失败的源代码：
var log = '';
function mkController(msg) {
return function($scope) {
// This is the constructor of a controller
// I'd expect this constructor to the first time a state is loaded.
// When switching to a sister state and back it should not be called again.
if (!$scope.random) {
// I expect the $scope object to be retained when changing states for and
// back. So even if my assumption that the controller will be persistent
// would be wrong this is to check whether the $scope survives.
// If the scope survives the random number will be initialized only once
// and then it won't change anymore:
$scope.random = Math.round(Math.random()*10000);
}
// This log will tell us how often the controller constructor has been called
// (Should be only once, I think)
log += 'creating: ' + msg + '\n';
this.message = log;
}
}
angular.module('plunker', ['ui.router', 'ct.ui.router.extras.sticky', 'ct.ui.router.extras.dsr'])
.controller('ControllerA', mkController('ControllerA'))
.controller('ControllerB', mkController('ControllerB'))
.run(function($templateCache) {
$templateCache.put('root.html', '<div ui-view="myview"></div>');
$templateCache.put('templateA.html', '<div ng-controller="ControllerA as controller"><pre>Random: {{random}}, Message (templateA): {{controller.message}}</pre></div>');
$templateCache.put('templateB.html', '<div ng-controller="ControllerB as controller"><pre>Random: {{random}}, Message (templateB): {{controller.message}}</pre></div>');
})
.config(function($stateProvider) {
$stateProvider
.state('root', {
url: '/',
templateUrl: 'root.html'
}).state('root.stateA', {
url: '/stateA',
views: {
myview: {
templateUrl: 'templateA.html',
}
},
sticky: true,
deepStateRedirect: true
}).state('root.stateB', {
url: '/stateB',
views: {
myview: {
templateUrl: 'templateB.html',
}
},
sticky: true,
deepStateRedirect: true
});
})
.config(function($stickyStateProvider) {
$stickyStateProvider.enableDebug(true);
});
我想通了：
- 首先，我没有意识到命名视图的实际用途：每个选项卡有一个单独的视图。
- 其次，我没有意识到我需要自己隐藏和显示视图。
演示页面中都提到了两者，但我不得不承认我并没有真正仔细阅读演示页面的文本，因为我认为这只是关于这个特定演示的信息。
无论如何：这是一个我认为是让粘性状态运行所需的最低限度的例子：
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.3.12" src="https://code.angularjs.org/1.3.12/angular.js" data-require="angular.js@1.3.x"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>
<script src="ui-router-extras.js"></script>
<script src="app.js"></script>
</head>
<body>
<ul class="nav nav-tabs nav-tabs-head" role="tablist">
<li ui-sref-active="active"><a ui-sref="root.stateA" role="tab">StateA</a></li>
<li ui-sref-active="active"><a ui-sref="root.stateB" role="tab">StateB</a></li>
</ul>
<div ui-view="" />
</body>
</html>
JavaScript
var log = '';
function mkController(msg) {
return function($scope) {
// This is the constructor of a controller
// I'd expect this constructor to the first time a state is loaded.
// When switching to a sister state and back it should not be called again.
if (!$scope.random) {
// I expect the $scope object to be retained when changing states for and
// back. So even if my assumption that the controller will be persistent
// would be wrong this is to check whether the $scope survives.
// If the scope survives the random number will be initialized only once
// and then it won't change anymore:
$scope.random = Math.round(Math.random()*10000);
}
// This log will tell us how often the controller constructor has been called
// (Should be only once, I think)
log += 'creating: ' + msg + '\n';
this.message = 'Current msg: ' + msg + '\n\n' + log;
}
}
angular.module('plunker', ['ui.router', 'ct.ui.router.extras.sticky'])
.controller('ControllerA', mkController('ControllerA'))
.controller('ControllerB', mkController('ControllerB'))
.config(function($stateProvider) {
$stateProvider
.state('root', {
url: '/',
template: '<div ui-view="a" ng-show="$state.includes(\'root.stateA\')"></div><div ui-view="b" ng-show="$state.includes(\'root.stateB\')"></div>'
}).state('root.stateA', {
url: '/stateA',
views: {
'a@root': {
template: '<div ng-controller="ControllerA as controller"><h1>A</h1><pre>Random: {{random}}, Message (templateA): {{controller.message}}</pre></div>',
}
},
sticky: true
}).state('root.stateB', {
url: '/stateB',
views: {
'b@root': {
template: '<div ng-controller="ControllerB as controller"><h1>B</h1><pre>Random: {{random}}, Message (templateB): {{controller.message}}</pre></div>',
}
},
sticky: true
});
})
.config(function($stickyStateProvider) {
$stickyStateProvider.enableDebug(true);
})
.run(function ($rootScope, $state) {
$rootScope.$state = $state;
});