python - 在 django 和 angular 中提交表单后停留在同一个选项卡上

Question

我有一个 boards.html 页面，在该页面上我有 3 个选项卡(用 angular 编写)；您的董事会、加入董事会和创建董事会。在 Join Board 选项卡下有一个 join board 按钮(这是一个 django 函数)，单击该按钮会重新加载页面，以便它返回到默认的 Your Boards 选项卡，我希望它保留在 Join Board 选项卡上。这是我的一些代码:

app.js 标签 Controller

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 函数

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)

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>

我试过了

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

在我单击加入板按钮或刷新页面后，它会保留在“加入板”选项卡上，但它也使我无法访问其他选项卡。我已经阅读了有关使用 ngCookie 的内容，但我的所有选项卡都在同一个 html 页面上，所有这些示例都是为了记住用户名或是否有人登录，这与我的问题无关。此外，我正在尝试避免使用 jQuery，所以我很乐意就使用 Angular 和/或 Django 提出任何建议。

Answer 1

您的整个页面正在重新加载。这意味着您将丢失页面上的所有信息，除非您将其存储在某个地方。如果您想继续使用 Django 表单，我建议您将查询参数添加到 Angular 路由中，这样您就可以在加载页面时直接跳转到那里。

你的 url 看起来像 www.awesomeboards.com/boards?tab=2 然后你会在 Controller 加载时查看你的参数，然后切换到这些参数。

否则你可以查看django-angular ，特别是 section在表格上。我没有用过它，但它可能有帮助吗？