1

angular と bootstrap を使用して 3 つのビューを持つ単一ページ アプリケーションを構築しようとしています。私はAngularが初めてで、以下を実装したいと考えています:

jQuery Mbile では、3 つの異なるページで 3 つの異なるチャットを行うことができます。現在ページ A にいる場合、ページ B と C のチャットはまだ進行中です。したがって、ページをナビゲートしても、他のページのプロセスは停止しません。

私が間違っている場合は、私を修正してください。jQuery Mobile で data-role="page" を使用して div 間を移動できるように、角度のある同じパーシャル/ページで複数のビュー/テンプレートを切り替える方法を知りたいですか? jQuery Mobile を angular および bootstrap と組み合わせるのは良い考えですか? （本当にないと思います）

4

1 に答える 1

0

まず、ルートが変更されるたびに、Angular はビューを更新します。これを防ぐ唯一の方法は、ルートの「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/

于 2013-03-04T16:18:47.200 に答える