angular $ resource无法按预期工作

时间:2016-12-15 11:04:53

标签: javascript angularjs

我在AngularJS中有一个非常简单的地址应用程序。它使用$resource连接到API。

我使用的ID是该人的手机号码(我知道它不是最好的方式,但它只是一个示例应用程序来显示3层应用程序设置)所以我有2页,形式相同:

insert and edit form

我面临的问题是它使用相同的$资源来保存新地址并保存已编辑的地址。当我保存一个新地址时,它必须使用没有附加id的URL http://127.0.0.1:5000/api/contacts/(它将在api /数据库端获得的新ID是填写的手机号码) 当我编辑现有地址并单击保存按钮时,它必须使用另一个URL; http://127.0.0.1:5000/api/contacts/@mobilePhone

所以,我已经阅读了https://docs.angularjs.org/api/ngResource/service/ $资源上的角度文档,其中声明您可以在操作中覆盖paramDefaults。这就是我尝试使用此代码所做的事情:

$resource('http://127.0.0.1:5000/api/contacts/:id',{id:'@mobilePhone'},{
        get: {
            method: 'GET'
        }, update: {
            method: 'PUT'
        }, save: {
            method: 'POST',
            id:''
        }
    },{});
鉴于这些信息,这似乎是正确的。它在每个GET上附加mobilePhone编号,并且每个PUT分别附加get和update方法。当它调用save方法时,它应该用空字符串覆盖:id,但它不会这样做。 显然,我做错了什么。

如果您需要更多代码snipets让我知道,我尽量保持干净。

更新

这就是我调用save方法的方法:

.... 
.controller('MovieCreateController',function($scope,$state,$stateParams,Movie){

    $scope.movie=new Movie();

    $scope.addMovie=function(){

        $scope.movie.$save(function(){
            $state.go('movies');
        });
    }

}

这是编辑方法:

....
 .controller('MovieEditController',function($scope,$state,$stateParams,Movie){

    $scope.updateMovie=function(){
        $scope.movie.$update(function(){
            $state.go('movies');
        });
    };

    $scope.loadMovie=function(){
        $scope.movie=Movie.get({id:$stateParams.id});
    };

    $scope.loadMovie();
});

2 个答案:

答案 0 :(得分:0)

您的问题代码不多,所以我会尝试解释您应该如何使用$ resource。

查看以下代码:

// The $resource service is a helper to create a 'constructor' function 
// Contact below is a function 
var Contact = $resource('http://127.0.0.1:5000/api/contact/:id',{id:'@mobilePhone'}, {
get: {
    method: 'GET' // You don't need to override the GET
}, update: {
    method: 'PUT'
}, save: {
    method: 'POST'
}});

// Be sure to create an 'entity' from the Contact $resource
// The 'new' will create a $resource instance with $update, $save methods overridden methods
var contact = new Contact({name: 'foobar'});
contact.$save(); // Will send a POST request

contact.mobilePhone = 2; // This is your id !
contact.$update();  // Will send a PUT request

如果您的资源始终具有RESTful表示形式,我建议您按照angular discussion on issue#9807的建议使用:

resource.prototype.$save = function() {
    if (this.id) {
        return this.$update();
    } else {
        return this.$create();
    }
};

..而是总是覆盖你的$ resource方法。

答案 1 :(得分:-1)

这是您需要调用save方法的方法     $ scope.movi​​e = new Movie();

$scope.addMovie=function(){
    $scope.movie.$save(function(){
        $state.go('movies');
    });
}

这就是您需要调用编辑方法的方法

 $scope.movie=new Movie();
$scope.updateMovie=function(){
    $scope.movie.$update({ "mobilePhone": $stateParams.id},function(){
        $state.go('movies');
    });
};

为此你需要为$ resource创建一个工厂。总是值得推荐

试试这个

.factory('movie', ['$resource', function ($resource) {
    return $resource('http://127.0.0.1:5000/api/contacts/:id',{id:'@mobilePhone'},{}, {
        update: { method: 'PUT' },
        query: {
            method: 'GET',
            isArray: false
        }
    })
}])

在控制器中注入工厂

.controller('MovieCreateController',['$scope','$state','$stateParams','movie',function($scope,$state,$stateParams,Movie){
}]);