Question

我刚学会了Angular.js。我尝试使用angularjs将对象与表单绑定。我有一个项目列表，当用户点击一个，应用程序转到弹簧控制器：

@RequestMapping(value = {"test/{id}" }, method = RequestMethod.GET)
    public ModelAndView test(@PathVariable String id) {
        LOG.info("test() main page called with id = " + id);
        ModelAndView mav = new ModelAndView("test");
        return mav;
    }

test.jsp.如下所示：

<!doctype html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example99-production</title>


<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js"></script>
<script src="<c:url value="/static/s/${buildInfo.commitId}/js/controller.js" />"></script>
<script type="text/javascript">var appRoot = "<c:url value="/" />";</script>

</head>
<body ng-app="">
    <div data-ng-app="formular" data-ng-controller="Controller"
        data-ng-submit="save()">
        <form novalidate class="simple-form">
            Author: <input type="text" data-ng-model="stickerModel.author" /><br />
            Id: <input type="text" data-ng-model="stickerModel.id" /><br />
            Title: <input type="text" data-ng-model="stickerModel.title" /><br />
            <button ng-click="reset()">RESET</button>
            <button ng-click="update(stickerModel)">SAVE</button>
        </form>

    </div>

</body>
</html>

和angularjs控制器：

function Controller($scope, $http) {
    getUrl =  appRoot + 'rest/tttt' ;

    $http({method: 'GET', url: getUrl}).
    success(function(data, status, headers, config) {
        $scope.stickerModel = data;
        console.log('controller', data); 
    }).
    error(function(data, status, headers, config) {
      // called asynchronously if an error occurs
      // or server returns response with an error status.
    });

    $scope.save = function() {
       //do sth
      };

    $scope.master = {};

    $scope.update = function(sticker) {
        $scope.master = angular.copy(sticker);
    };

    $scope.reset = function() {
        $scope.sticker = angular.copy($scope.master);
    };

    $scope.reset();
}

现在我用硬编码变量（getUrl = appRoot + 'rest/tttt' ;）调用休息服务但我想用给定的 id （就像在spring控制器中）来调用它。我用谷歌搜索我应该使用$routeParams，但当我在我的角度控制器（'函数控制器（$ scope，$ http，$ routeParams）'）中添加时出现错误：

Error: [$injector:unpr] http://errors.angularjs.org/1.3.0-beta.5/$injector/unpr?p0=%24routeParamsProvider%20%3C-%20%24routeParams
    at Error (native)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js:6:456
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js:35:368
    at Object.c [as get] (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js:33:461)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js:35:436
    at c (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js:33:461)
    at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js:34:176)
    at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js:34:340)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js:66:72
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js:52:434 angular.js:9784
(anonymous function) angular.js:9784
(anonymous function)

Answer 1

我并不完全确定它是您想要实现的目标，但您已经根据服务器端生成的信息自定义了您的网址：

var appRoot = "<c:url value="/" />";

...

getUrl =  appRoot + 'rest/tttt' ;

所以你只需要为你的ID做同样的事情：

@RequestMapping(value = {"test/{id}" }, method = RequestMethod.GET)
public ModelAndView test(@PathVariable String id) {
    LOG.info("test() main page called with id = " + id);
    ModelAndView mav = new ModelAndView("test");

    mav.addObject("theId", id);

    return mav;
}

...

var theId = '${theId}';

...

var getUrl =  appRoot + 'test/' + theId;

如何从@PathVariable到AngularJS控制器获取param

1 个答案: