作者:手机用户2602915671 | 来源:互联网 | 2023-05-23 13:58
我有一个页面,其中包括分布在几个选项卡上的HTML表单元素.我希望用户能够切换标签而不会丢失他在表单元素上输入的数据(我还想保存不必要的数据重新加载).我仍然希望能够将某个链接传递给特定标签.
这听起来像ui-extras粘性状态应该完全符合我的需要.除了我一直没有成功地让它工作.
我研究了示例源代码,当我启动示例时,例如在controllers.js的第57行中找到的库存控制器的构造函数中使用firebug设置断点,我看到构造函数只被触发一次.然而,我的控制器构造函数一次又一次地被触发,我的应用程序的行为非常类似于粘性状态不存在,尽管如果我启用粘性状态调试它告诉我它正在做某事(停用和重新激活状态).
我发现有人声称粘性状态仅适用于此答案中的注释中的命名视图,所以我试图给我的视图命名,但这没有任何区别.
我尝试在我的标签之前插入一个明确的"根状态".
我尝试通过ng-controller或控制器定义在状态中插入控制器.
github上的例子是一个很好的炫耀,但它不仅仅是最小的,而且很难看到实际需要什么,什么不是.
什么是开始使用粘性状态所需的最小例子?(额外奖励:我的代码出了什么问题?).
作为参考,这里有一个尝试失败的傻瓜(参见历史以查看先前尝试的选择).
这是我目前失败的源代码:
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', '');
$templateCache.put('templateA.html', 'Random: {{random}}, Message (templateA): {{controller.message}}
');
$templateCache.put('templateB.html', 'Random: {{random}}, Message (templateB): {{controller.message}}
');
})
.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);
});
yankee..
8
我想到了:
首先,我没有意识到命名视图实际上是如何使用的:每个选项卡都有一个单独的视图.
其次,我没有意识到自己需要隐藏和展示观点.
两者都在演示页面中提到,但我不得不承认我并没有真正阅读演示页面的文本,因为我认为这只是关于这个特定演示的信息.
无论如何:这是一个我认为是获得粘性状态所需的最小值的例子:
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: ''
}).state('root.stateA', {
url: '/stateA',
views: {
'a@root': {
template: 'A
Random: {{random}}, Message (templateA): {{controller.message}}
',
}
},
sticky: true
}).state('root.stateB', {
url: '/stateB',
views: {
'b@root': {
template: 'B
Random: {{random}}, Message (templateB): {{controller.message}}
',
}
},
sticky: true
});
})
.config(function($stickyStateProvider) {
$stickyStateProvider.enableDebug(true);
})
.run(function ($rootScope, $state) {
$rootScope.$state = $state;
});
关于plunkr的演示
链接
1> yankee..:
我想到了:
首先,我没有意识到命名视图实际上是如何使用的:每个选项卡都有一个单独的视图.
其次,我没有意识到自己需要隐藏和展示观点.
两者都在演示页面中提到,但我不得不承认我并没有真正阅读演示页面的文本,因为我认为这只是关于这个特定演示的信息.
无论如何:这是一个我认为是获得粘性状态所需的最小值的例子:
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: ''
}).state('root.stateA', {
url: '/stateA',
views: {
'a@root': {
template: 'A
Random: {{random}}, Message (templateA): {{controller.message}}
',
}
},
sticky: true
}).state('root.stateB', {
url: '/stateB',
views: {
'b@root': {
template: 'B
Random: {{random}}, Message (templateB): {{controller.message}}
',
}
},
sticky: true
});
})
.config(function($stickyStateProvider) {
$stickyStateProvider.enableDebug(true);
})
.run(function ($rootScope, $state) {
$rootScope.$state = $state;
});
关于plunkr的演示
链接