Spring ModelAndView与AngularJS ng-model绑定及最佳实现方案问询

嘿，你已经迈出了第一步，搞定了简单字符串的绑定！不过咱们可以把这个实现优化得更规范，同时也来聊聊复杂对象（比如List、自定义POJO）绑定到AngularJS作用域的最佳姿势。

一、简单值的绑定（你已尝试的场景） #

你用ng-init的方式其实是可行的，但更推荐把初始化逻辑放到AngularJS的控制器里，这样更符合Angular的代码组织习惯，后续扩展也更方便：

Spring Controller 代码（保持不变） #

public ModelAndView getUsers(){
    ModelAndView mav = new ModelAndView();
    mav.addObject("username","somename");
    mav.setViewName("users");
    return mav;
}

JSP + AngularJS 代码优化 #

<!-- 先定义Angular模块和控制器 -->
<script>
angular.module('userApp', [])
.controller('UserController', function($scope) {
    // 从JSP表达式获取Spring传递的值，初始化Angular作用域变量
    $scope.name = '${username}';
});
</script>

<!-- 在视图中关联控制器并使用ng-model -->
<div ng-app="userApp" ng-controller="UserController">
    <input ng-model="name"> {{name}}
</div>

二、复杂对象/集合的绑定（比如List、自定义对象） #

如果要传递List<String>或者自定义的User对象这类复杂数据，直接用EL表达式拼接会非常麻烦，最佳方式是把Spring的对象转成JSON字符串，然后在Angular中解析成JavaScript对象，这样就能无缝使用Angular的各种指令了。

步骤1：Spring Controller 中将对象转为JSON #

首先确保项目引入了JSON处理依赖（比如Jackson），然后在Controller里把集合/对象转成JSON字符串：

import com.fasterxml.jackson.databind.ObjectMapper;
import java.util.ArrayList;
import java.util.List;

public ModelAndView getUsers(){
    ModelAndView mav = new ModelAndView();
    List<String> usernameList = new ArrayList<>();
    usernameList.add("Alice");
    usernameList.add("Bob");
    usernameList.add("Charlie");
    
    // 将List转换为JSON字符串
    ObjectMapper objectMapper = new ObjectMapper();
    try {
        String userJson = objectMapper.writeValueAsString(usernameList);
        mav.addObject("userListJson", userJson);
    } catch (Exception e) {
        e.printStackTrace();
    }
    
    mav.setViewName("users");
    return mav;
}

步骤2：AngularJS 中解析JSON并绑定 #

在Angular控制器中直接解析这个JSON字符串，就能得到JavaScript数组（或对象），之后就可以用ng-repeat等指令轻松操作了：

<script>
angular.module('userApp', [])
.controller('UserController', function($scope) {
    // 解析Spring传递的JSON字符串，得到JavaScript数组
    $scope.users = JSON.parse('${userListJson}');
    
    // 如果是自定义POJO（比如包含id、name属性的User对象），解析后也能直接访问属性
    // $scope.users.forEach(user => console.log(user.name));
});
</script>

<div ng-app="userApp" ng-controller="UserController">
    <h3>用户列表</h3>
    <ul>
        <li ng-repeat="user in users">{{user}}</li>
    </ul>
</div>

额外注意事项 #

• 如果你的对象包含特殊字符（比如引号、换行符），直接用${}可能会导致JSON解析错误，这时候可以用JSP的fn:escapeXml函数进行转义：

  $scope.users = JSON.parse('${fn:escapeXml(userListJson)}');
  

• 如果你正在往前后端分离的方向走，也可以考虑用Angular的$http服务直接调用Spring的REST接口获取数据，这是更现代的方案，但如果是传统JSP渲染的场景，上面的方式已经足够好用啦。

内容的提问来源于stack exchange，提问作者Mr code.