角度 $resource 没有按预期工作

Question

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

我使用的 ID 是该人的手机号码（我知道这不是最好的方法，但这只是一个示例应用程序，用于显示 3 层应用程序设置）所以我有 2 个页面相同形式：

我面临的问题是它使用相同的 $resource 来保存新地址和保存已编辑的地址。当 iḿ 保存新地址时，它必须使用 url http://127.0.0.1:5000/api/contacts/ 而不附加 id（它将在 api/database 端获得的新 ID 是填写的手机号码） 当我编辑现有地址并单击保存按钮时，它必须使用另一个网址； http://127.0.0.1:5000/api/contacts/@mobilePhone.

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

$resource('http://127.0.0.1:5000/api/contacts/:id',{id:'@mobilePhone'},{
        get: {
            method: 'GET'
        }, update: {
            method: 'PUT'
        }, save: {
            method: 'POST',
            id:''
        }
    },{});

根据信息，这似乎是正确的。它将手机号码附加到每个 GET 和每个 PUT 上，分别是 get 和 update 方法。当它调用 save 方法时，它应该用一个空字符串覆盖:id，但它不会这样做。 显然我做错了什么。

如果您需要更多代码片段，请告诉我，我尽量保持干净。

更新：

这就是我调用保存方法的方式：

.... 
.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();
});

Answer 1

您的问题中没有太多代码，所以我将尝试解释您应该如何使用 $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 方法。

Answer 2

这就是您需要调用保存方法的方式 $scope.movi​​e=新电影();

$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){
}]);