AngularJs如何从Spring MVC控制器访问模型属性值

Question

我有一个 Spring MVC 控制器返回一个具有如下属性的页面

@RequestMapping(method = RequestMethod.GET, value = "/create")
public ModelAndView getAddAccountView() {
    ModelAndView model = new ModelAndView("protected/accounts/AccountAddView");
    List<Client> clients=clientService.findAll();
    model.addObject("listClients", clients);
    return model;
}

客户端是@Entity

在我的 AccountAddView.jsp 文件中，我正在尝试使用 ng-init，如下所示：

<div class="row-fluid" ng-controller="accountsController as ctrl" ng-init="clients=${listClients}">

在我的 app.js 中，在我的控制器中，我尝试按如下方式访问客户端列表

var listOfClients=$scope.clients;

但我仍然收到以下错误

angular.min-1.5.3.js:116 Error: [$parse:lexerr] http://errors.angularjs.org/1.5.3/$parse/lexerr?p0=Unexpected%20nextharacter%20&p1=s%2033-33%20%5B%40%5D&p2=clients%3D%5Bsoftbank.ui.model.Client%4042%2C%softbank.ui.model.Client%4041%2C%softbank.ui.model.Client%4043%5D
at Error (native)
at http://localhost:8080/softbank/resources/js/angular.min-1.5.3.js:6:416
at gc.throwError (http://localhost:8080/softbank/resources/js/angular.min-1.5.3.js:212:149)
at gc.lex (http://localhost:8080/softbank/resources/js/angular.min-1.5.3.js:211:16)
at Object.ast (http://localhost:8080/softbank/resources/js/angular.min-1.5.3.js:216:103)
at Object.compile (http://localhost:8080/softbank/resources/js/angular.min-1.5.3.js:225:232)
at hc.parse (http://localhost:8080/softbank/resources/js/angular.min-1.5.3.js:252:380)
at e (http://localhost:8080/softbank/resources/js/angular.min-1.5.3.js:123:317)
at m.$eval (http://localhost:8080/softbank/resources/js/angular.min-1.5.3.js:142:463)
at pre (http://localhost:8080/softbank/resources/js/angular.min-1.5.3.js:271:500)

请问这里有什么问题。为什么 ng-init 会产生这个错误？ 提前感谢您的回答。

Answer 1

旧帖子，但我仍然想回答，以便任何使用 Angular 和 Spring MVC 的人都能获得一些帮助。
使用模型属性是 Angular 的一个挑战。早些时候我在mav.addObject("employee",employee)之类的模型属性中设置员工数据，但是当我尝试在jsp中使用${employee}时，Angular无法使用ng-init指令设置java对象，因为它需要一个java脚本目的。所以我在模型属性mav.addObject("employeeJson", empJson) 中设置了json，并使用json.Parse() 对其进行解析以将其转换为Java Script Object，并能够在jsp 上将其与Angular 表达式一起使用
以下是我遵循的步骤：
1。弹簧控制器
在您的控制器中，在模型属性中设置 json。例如
mav.addObject("employeeJson", empJson);
确保在添加到ModelAttribute之前，将引号替换为html实体“，否则解析json时会出错 empJson.replaceAll("\"", "\&\quot;");
2. Jsp
使用角度初始化指令data-ng-init="yourController.getEmployeeData('${employeeJson}')"
3。在Angular js中
解析这个json得到json
var vm = this;
vm.employee = {};
vm.getEmployeeData = function(employeeJson){, vm.employee = JSON.parse(employeeJson); };
4.在 jsp 中
我可以访问员工姓名为 {{yourController.employee.firstName}}

Answer 2

我刚开始使用带有 Spring 的 Angular，所以我将解释我是如何做到的，您可以看看它是否适合您。

首先，我没有尝试通过ModelAndView 获取我的数据。我让我的“常规”控制器返回视图，但通过角度控制器和服务以及 Spring 端的 @RestController 获取我的数据（那是两个单独的 Spring 控制器）。

要仅返回视图，您至少有两个我知道的选项。一，你可以只返回一个ModelAndView 而没有这样的模型：

public ModelAndView yourView() {
    return new ModelAndView("yourView");
}

或者二，将视图的名称作为字符串返回，如下所示：

public String yourView() {
    return "yourView";
}

在这两种情况下，您显然都需要正确的@RequestMapping。

在我看来，我有一个 Angular 控制器函数，它调用了我的相关 Angular 服务，而后者又调用了我的 @RestController 等等。我像这样启动数据：

ng-controller="MyController as ctrl" ng-init="ctrl.allThings()"

代码示例：

角度控制器：

self.allThings = function () {
        ThingService.things()
            .then(
                function (data) {
                    self.things = data;
                },
                function (errResponse) {
                    console.error("Error retrieving thing list");
                }
            );
    };

角度服务：

    things: function() {
        return $http.get('/things')
            .then(
                function(response) {
                    return response.data;
                },
                function (errResponse) {
                    return $q.reject(errResponse);
                }
            );
    },

Spring REST 控制器：

@RequestMapping(value = "/things", method = RequestMethod.GET)
public List<Thing> things() {
    return thingService.findAll();
}

我想你知道 Spring 方面的剩余代码。 Jackson 将为您处理所有对象转换。