Question

我有一个boards.html页面，在该页面上我有3个标签（用角度写）;您的董事会，加入董事会和创建董事会。在“连接板”选项卡下有一个连接板按钮（这是一个django功能），当单击它时，重新加载页面，使其返回到默认的“您的板”选项卡，我希望它保留在“连接板”选项卡上。这是我的一些代码：

app.js 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 function

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表单，我建议您在角度路由中添加查询参数，以便在加载页面时直接跳到那里。

您的网址看起来像www.awesomeboards.com/boards?tab=2，然后您在控制器负载上查看您的参数，然后切换到这些参数。

否则，您可以查看django-angular，特别是表单上的section。我没有使用它，但它可能会有所帮助吗？

在django和angular中提交表单后保持相同的选项卡

1 个答案: