AngularJS技术问题：基于布尔值切换页面消息文本

嘿，作为AngularJS新手碰到这种看似简单的需求卡壳太正常啦！我来给你拆解一下怎么实现这个功能，分步骤来，保证你能搞定～

1. 页面文本的条件渲染 #

首先要根据user.myValue的布尔值显示不同的文本和链接，用Angular的ng-if就很方便，同时给链接绑定点击事件打开模态框：

<!-- 页面上的核心文本区域 -->
<div ng-if="user.myValue">
  文本A <a href="#" ng-click="openToggleModal()">点击切换状态</a>
</div>
<div ng-if="!user.myValue">
  文本B <a href="#" ng-click="openToggleModal()">点击切换状态</a>
</div>

<!-- 模态框模板（用AngularUI Bootstrap的模态框，新手友好易上手） -->
<script type="text/ng-template" id="toggleModal.html">
  <div class="modal-header">
    <h3>确认切换</h3>
  </div>
  <div class="modal-body">
    确定要切换当前状态吗？
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" ng-click="confirmToggle()">确认切换</button>
    <button class="btn btn-default" ng-click="$dismiss('cancel')">取消</button>
  </div>
</script>

2. Angular控制器逻辑实现 #

接下来写控制器代码，要处理模态框的打开、后端API调用，以及更新页面数据（Angular的双向绑定会自动帮你更新显示）：

// 先声明你的Angular模块，记得引入ui.bootstrap依赖（如果用它的模态框）
angular.module('yourAppName', ['ui.bootstrap'])
.controller('YourController', function($scope, $http, $uibModal) {
  // 从Django模板传递用户数据（安全写法：用json_script过滤器）
  // 对应Django模板里的代码：<script id="user-data" type="application/json">{{ user|json_script:"user-data" }}</script>
  $scope.user = JSON.parse(document.getElementById('user-data').textContent);

  // 打开模态框的函数
  $scope.openToggleModal = function() {
    var modalInstance = $uibModal.open({
      templateUrl: 'toggleModal.html',
      controller: 'ToggleModalController',
      resolve: {
        currentUser: function() {
          return $scope.user;
        }
      }
    });

    // 模态框关闭后，更新页面的用户数据
    modalInstance.result.then(function(updatedUser) {
      $scope.user = updatedUser;
    }, function() {
      // 取消操作，啥也不用做
    });
  };
})
// 模态框的子控制器，专门处理切换逻辑
.controller('ToggleModalController', function($scope, $http, $uibModalInstance, currentUser) {
  $scope.user = currentUser;

  // 调用Django REST端点切换布尔值
  $scope.confirmToggle = function() {
    // 替换成你的实际API端点路径
    $http.post('/api/user/toggle-myvalue/')
    .then(function(response) {
      // 成功后把更新后的用户数据传回父控制器
      $uibModalInstance.close(response.data);
    })
    .catch(function(error) {
      console.error('切换失败啦:', error);
      $uibModalInstance.dismiss('error');
    });
  };
});

3. Django REST端点补充（关键后端部分） #

别忘了写对应的Django视图来处理切换请求，确保用户已登录且有权限：

from rest_framework.decorators import api_view, permission_classes
from rest_framework.permissions import IsAuthenticated
from rest_framework.response import Response
from django.contrib.auth.models import User # 假设你的用户模型是默认的，或者替换成自定义模型

@api_view(['POST'])
@permission_classes([IsAuthenticated])
def toggle_myvalue(request):
    # 获取当前登录用户
    user = request.user
    # 切换布尔值
    user.myValue = not user.myValue
    user.save()
    # 返回更新后的字段，供Angular更新页面
    return Response({'myValue': user.myValue})

几个新手容易踩坑的点 #

• CSRF令牌问题：Angular默认会自动携带CSRF令牌，但要确保Django模板里有{% csrf_token %}，或者在Angular的$httpProvider里配置正确的CSRF头。
• 用户数据传递安全：别直接在模板里用{{ user|json }}，要用json_script过滤器，避免XSS风险。
• 模态框依赖：如果用AngularUI Bootstrap的模态框，记得在页面里引入对应的CSS和JS文件。

这样一步步走下来，就能完美实现你要的功能啦～

内容的提问来源于stack exchange，提问作者Heather