保持状态打开”;在背景中”;.隐藏，但不要't在Angular UI中离开状态

Leave state open "in background". Hide, but don't leave state in Angular UI

本文关键字：状态 UI Angular 离开 隐藏 背景      更新时间：2024-03-08

我有一个Angular应用程序，它使用Angular UI来处理状态，有2个或多个状态。在一种状态下，用户可能开始写文本，例如，或播放Youtube视频。目前，如果他们切换状态，视频将停止播放，其他数据将丢失。各州并没有相互嵌套，这与应用程序的布局方式并不相符。

有没有一种方法可以在国家发生变化时不摧毁它们，并让它们"在后台"保持开放？

我的另一个想法是将这些状态合并为一个状态，然后使用ng-hide在这些视图之间切换。但这将增加加载时间，并且未来可能会有大量流。

另一个想法是在播放Youtube视频时以更高的状态打开它。

如果有帮助的话，想象一下我的状态是链接浏览器选项卡，我希望用户能够在它们之间切换。

有没有针对这个或其他想法的原生Angular UI解决方案？

谢谢。

我不确定YouTube视频，因为它将在DOM中，DOM中的内容在状态之间被替换。

对于其他数据，可以考虑使用角度服务在视图之间存储变量。服务独立于视图，非常适合这类事情。

你也可以在你的服务中存储当视图更改时用户在YouTube视频中的位置。这样，当视图再次变回时，您可以继续播放。

服务：

app.factory('MainService', function(){
    var service = {};
    service.model = 'Main page';
    return service;
});

使用服务的控制器：

app.controller( 'MainCtrl', function ( $scope, MainService ) {
    $scope.service = MainService;    
});

最后在模板中：

<input type="text" ng-model="service.model">

以下是使用服务和ngRoute的示例：http://jsfiddle.net/NEuJ6/180/

编辑：如果你想在状态更改时在服务中存储一些东西，那么使用

$scope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){ 
   service.storedStuff = 'Something';
});

在您的控制器中。

相关文章：