2016-06-24 5 views
2

私はboards.htmlページを持っています。そのページには3つのタブがあります。あなたのボード、ボードに参加し、ボードを作成します。 Join Boardタブの下にJoin Boardボタン(djangoの機能)があります。クリックするとページがリロードされてデフォルトのYour Boardsタブに戻りますので、Join Boardタブに残しておきます。ここに私のコードのビットは次のとおりです。フォームがdjangoで投稿された後、同じタブに留まる

はTabController

app.controller('TabController', ['$scope', '$http', function($scope, $http){ 
    this.tab = 1; 
    this.setTab = function(newValue){ 
     this.tab = newValue; 
    }; 

    this.isSet = function(tabName){ 
     return this.tab === tabName; 
    }; 
    $http.get('/checklogin/').success(function(data) { 
     console.log('Current User: ' + data.user_id); 
     $scope.user = data; 
     $scope.userid = data.user_id; 
    }).error(function(data) { 
     console.log('error: ' + data); 
    }); 

}]); 

views.py join_board機能I「はboards.html

<section ng-controller="TabController as tab"> 
<ul class="nav nav-pills nav-justified"> 
    <li ng-class="{ active:tab.isSet(1) }"> 
     <a href ng-click="tab.setTab(1)">Your Boards</a> 
    </li> 
    <li ng-class="{ active:tab.isSet(2) }"> 
     <a href ng-click="tab.setTab(2)">Join Board</a> 
    </li> 
    <li ng-class="{ active:tab.isSet(3) }"> 
     <a href ng-click="tab.setTab(3)">Create Board</a> 
    </li> 
</ul> 

<!-- Your Boards Tab's Content --> 
<div ng-show="tab.isSet(1)"> 
    ... 
</div> 
<!-- Join Board Tab's Content --> 
<div ng-show="tab.isSet(2)"> 
    <h2>Boards you can join</h2> 
    {% if found_entries %} 
     {% for board in found_entries %} 
      <h4> {{board.board_name}} </h4> 
      <form action="/join/{{board.board_name}}/"> 
       {% csrf_token %} 
       {% if board not in userBoards %} 
        <button id="join" type="submit" value="Delete"> {% trans "Join Board" %} </button> 
       {% endif %} 
      </form> 
     {% endfor %} 
    {% else %} 
      <h4> No Boards Found </h4> 
    {% endif %} 
</div> 
</section> 

def join_board(request, board): 
    boardObj = Board.objects.get(board_name=board) 
    if Profile.objects.filter(pk=request.user.profile.id, boards__pk=boardObj.id).exists(): 
     messages.error(request, 'Cannot join a board you are already a member of.') 
    else: 
     request.user.profile.boards.add(boardObj) 
     boardMemberGroup = Group.objects.get(name=board + ' member') 
     request.user.groups.add(boardMemberGroup) 
    return boards(request) 

関連する部分をapp.js試しました

<form action="/join/{{board.board_name}}/" ng-class="tab.setTab(2)"> 

これはボードに参加ボタンをクリックしたりページを更新した後に[ボードを結合する]タブに表示されますが、他のタブには表示されません。私はngCookieの使い方について読んだことがあるが、すべてのタブは同じHTMLページにあり、これらの例はすべてユーザ名を覚えていたか、誰かがログインしていて問題がない。また、私はjQueryを避けようとしているので、Angularおよび/またはDjangoを使用することをお勧めします。

+0

角度のある側面にフォームを作成することはできますか? djangoフォームを削除し、ngClickディレクティブで角度のあるフォームを使用する場合は、ページをリロードせずにjsonとしてdjangoにデータを戻すことができます。おそらくあなたはすでにこれを考慮したでしょうか? – JwM

+0

これは私ができることですが、唯一のことはDjangoを使ってデータベースとやりとりする方がはるかに簡単だということです。私はAngularがフロントエンドに表示されることは簡単だが、データベースに表示されるように変更するのは難しい@JWM – Catherine

答えて

1

ページ全体が読み込まれています。つまり、どこかに保管しない限り、ページ上にあるすべての情報を失うことになります。 Djangoのフォームにとどまりたいのであれば、角度ルーティングにクエリパラメータを追加することをお勧めします。そうすれば、ページが読み込まれたときにすぐジャンプすることができます。

あなたはwww.awesomeboards.com/boards?tab=2のように見えますが、コントローラーの負荷に関するパラメータを確認し、それらのパラメータに切り替えます。

そうでなければ、django-angular、具体的にはフォーム上のsectionを調べることができます。私はそれを使用していないが、それは助けるかもしれない?

+0

'urls.py'の私のURLパターンを変更する必要があるのだろうか? – Catherine

+0

@catherineアプリケーション/プロジェクトごとにURLを処理するには、角度j(おそらくui-router)を使用する価値があります。それが私が最も簡単に見つけたものです。私はあなたが 'urls.py'でそれをすべて保管したいと思います。私は助けられません。 – Pureferret

+0

以前は、URLに 'www.awesomeboards.com/boards /#tab2'のようなURLが表示されるように、タブにハッシュを追加しようとしましたが、別のタブをクリックするとURLが変更されましたが、タブ名を変更しても、ページがどのタブに表示されているかは変更されません。クエリパラメータにも同じ問題がありますか? – Catherine

関連する問題