Question

我有一个Angular应用程序，使用Angular UI进行状态，有2个或更多状态。在一种状态下，用户可能开始编写文本，例如，或播放Youtube视频。目前，如果他们切换状态，视频将停止播放，其他数据将丢失。状态不是彼此嵌套的，这与应用程序的布局方式并不完全相符。

有没有办法在更改后不破坏状态并在后台“打开”？

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

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

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

针对此想法或其他想法的任何原生Angular UI解决方案？

谢谢。

Answer 1

我不确定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';
});

在您的控制器中。