AngularJS + Twitter Bootstrap：更改后仍保留部分更改（jQuery Mobile）

Question

我正在尝试使用 angular 和 bootstrap 构建一个具有三个视图的单页应用程序。我是 Angular 新手，我想实现以下功能：

在 jQuery Mbile 中，可以在三个不同的页面上进行三个不同的聊天。如果我目前在页面 A，页面 B 和 C 中的聊天仍在进行中。因此，浏览页面不会停止其他页面上的进程。

如果我错了，请纠正我。我想知道如何在 jQuery Mobile 中使用 data-role="page" 在 div 之间导航的方式在同一个部分/页面上的多个视图/模板之间进行切换？将 jQuery Mobile 与 angular 和 bootstrap 结合起来是个好主意吗？ （我真的不这么认为）

Answer 1

首先，每当路线更改时，角度都会刷新视图。防止这种情况的唯一方法是将路由中的“reloadOnSearch”参数设置为 false。完成此操作后，您可以将查询字符串参数传递给视图，而无需重新加载视图。还有一个额外的警告是你必须明确地监听“$routeUpdate”。以下是角度代码，下面是一个小提琴，可以实现在多个聊天之间切换而不刷新视图的目标。我使用 ng-show 根据传递的查询字符串参数显示适当的聊天。

angular.module('app',[]).config(function($routeProvider){

    $routeProvider.when('/', {templateUrl: 'view.html', reloadOnSearch:false});

}).controller('controller', function($scope, $routeParams){
    $scope.$on('$routeUpdate', function(value) {
        $scope.id =   $routeParams.id;
    }); 
}).directive('chat', function(){
    return{
        restrict:'E',
        replace:true,
        scope:{},
        controller: function($scope){
            $scope.items = [];
            $scope.submit = function(text){
                $scope.items.push(text);
            };
        },
        templateUrl:'chat.html'
    }
});

http://jsfiddle.net/jwanga/u2RrU/