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，所以我要做的就是解釋我是如何做到的，並且您可以看到它是否是您可行的選擇。

其中之一，我沒有嘗試通過我的數據ModelAndView。我讓我的「常規」控制器返回視圖，但通過角度控制器和服務以及Spring端的@RestController（這是兩個獨立的彈簧控制器）獲得我的數據。

要僅返回視圖，您至少有兩個我知道的選項。一，你可以返回一個ModelAndView沒有一個模型，如下所示：

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

或兩個，作爲一個字符串返回該視圖的名稱，像這樣：

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

在這兩種情況下，你會明顯需要正確的@RequestMapping。

在我看來，我有一個角度控制器功能，撥打我的相關的角度服務，這又稱爲我的@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); 
       } 
      ); 
    }, 

彈簧安置控制器：

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

我想你知道Spring方面的其餘代碼。傑克遜將爲您處理所有對象轉換。

Answer 2

舊帖子，但我仍然想回答，以便任何使用Angular與Spring MVC的人都能得到一些幫助。
使用模型屬性是Angular的一大挑戰。早些時候，我在模型屬性中設置員工數據，如mav.addObject("employee",employee)，但是當我在jsp內部嘗試使用${employee}時，Angular無法使用ng-init指令設置java對象，因爲它期待java腳本對象。所以我在模型屬性mav.addObject("employeeJson", empJson)中設置了json，並使用json.Parse()將其解析爲將其轉換爲Java腳本對象，並且能夠在jsp上使用Angular表達式
1. Spring Controller
在您的控制器中，在模型屬性中設置json。對於例如
mav.addObject("employeeJson", empJson);
將它添加到ModelAttribute之前，請務必與HTML實體"更換引號，否則會出現錯誤，而解析JSON empJson.replaceAll("\"", "\&\quot;");
二.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}}