Question

我一直在努力寻找一种使用angularJS $ resource执行放置操作的好方法。我有映射，该映射将返回Web服务中的值数组，并且我具有POST和PUT端点来执行插入和更新。我得到查询以获取值数组并显示在页面上。现在，当我尝试编辑一个值并调用创建用于执行PUT操作的自定义选项“更新”时。

我的控制器看起来像

(function () {
'use strict';

var anErrorOccurred = 'An error has occurred.';
var noRecordsFound = 'No records were found.';

angular
    .module('customerContactInfo')
    .controller('customerContactInfoSearchController', ['$rootScope', '$scope',
        'customerContactInfoService', 'utilities',
        controllerFunc
    ]);


function controllerFunc(rootScope, scope,
    customerContactInfoService, utilities) {
    var self = this;
    this.fetchList = function () {
        customerContactInfoService.query(buildQueryObject(), function (data) {
            if (data.length === 0) {
                setPageMsg('infomsg', noRecordsFound);
            } else {
                setPageData(data, '');
            }
        }, function (response) {
            if (response.status === 404) {
                setPageMsg('errormsg', noRecordsFound);
            } else {
                setPageMsg('errormsg', anErrorOccurred);
            }
        });
    };

    function setPageData(data, message) {
        scope.customerContactInfoList = data;
        scope.error = message;
    }

    function setPageMsg(type, msg) {
        scope[type] = msg;
    }

    function buildQueryObject() {
        console.log(scope.accessToken);
        return {
            accessToken: scope.accessToken || rootScope.globalAngObj.customerSpaToken,
            userId: scope.userId || rootScope.globalAngObj.userId
        };
    }

    function buildQueryObjectForUpdate(customerIdUpdate, customerAddressNewValue) {
        return {
            accessToken: scope.accessToken || rootScope.globalAngObj.customerSpaToken,
            customerId: customerIdUpdate,
            customerMessageAddress: customerAddressNewValue
        };
    }

    function initPage() {
        scope.customerContactInfoList = undefined;
        scope.infomsg = undefined;
        scope.errormsg = undefined;
        scope.sortType = 'customerLastName'; // set the default sort type
        scope.sortReverse = false; // set the default sort order
        scope.searchCustomers = ''; // set the default search/filter term
    }

    function checkChildInit() {
        if (scope.$root.initChildApp) {
            self.fetchList();
        }
    }

    this.editDirectMsgAddress = function (customerContactInfo) {

        var note = customerContactInfoService.query(buildQueryObject());
        // Now call `update` to save the changes on the server
        note.$promise.then(function () {
            customerContactInfoService.$update(buildQueryObject(),
                buildQueryObjectForUpdate(customerContactInfo.customerId,
                    customerContactInfo.customerMessageAddress));
        });
    };

    initPage();
    checkChildInit();
}
})();

我的服务如下：

(function () {
'use strict';

angular
    .module('customerContactInfo')
    .factory('customerContactInfoService', ['$resource', 'serviceResolver',
        customerContactInfoServiceFactory
    ]);

function customerContactInfoServiceFactory(resource, serviceResolver) {
    return resource(serviceResolver.customerContactInfoWebservice.endpoints.get +
        '/:userId/?access_token=:accessToken', {}, {
            query: {
                method: 'GET',
                isArray: true,
                timeout: 10000,
                withCredentials: true
            }
        }, {
            update: {
                method: 'PUT'
            }
        });
}
})();

我的HTML看起来像：

<div class="app-table" ng-show="customerContactInfoList">
    <h5 class="information-text show-msg">Enter the customer messaging address to receive goods alerts for retail.
    </h5>
    <br>
    <div class="alert alert-danger error app-error-msg" role="alert" ng-class="{'show-msg':errormsg}" >{{errormsg}}</div>
    <div class="alert info app-info-msg" role="alert"  ng-class="{'show-msg':info}" >{{info}}</div>
    <div class="input-group">
        <label for="userId">Search Customer</label>
            <input type="text" placeholder="Search for Customer" ng-model="searchCustomers" ng-model-options="{debounce:250}">
    </div>
    <table class="tableone table table-hover">
            <thead>
                <tr>
                    <th class="portlet-table-header tabBtn" ng-click="sortType = 'customerLastName'; sortReverse = !sortReverse">
                        customer Last Name
                          <span ng-show="sortType == 'customerLastName' && !sortReverse"></span>
                          <span ng-show="sortType == 'customerLastName' && sortReverse"></span>
                    </th>
                    <th class="portlet-table-header tabBtn" ng-click="sortType = 'customerFirstName'; sortReverse = !sortReverse">
                        customer First Name
                          <span ng-show="sortType == 'customerFirstName' && !sortReverse"></span>
                          <span ng-show="sortType == 'customerFirstName' && sortReverse"></span>
                    </th>
                    <th class="portlet-table-header tabBtn" ng-click="sortType = 'customerId'; sortReverse = !sortReverse">
                      customer ID
                          <span ng-show="sortType == 'customerId' && !sortReverse"></span>
                          <span ng-show="sortType == 'customerId' && sortReverse"></span>
                    </th>
                    <th class="portlet-table-header tabBtn" ng-click="sortType = 'customerMessageAddress'; sortReverse = !sortReverse">
                        customer Messaging Address
                                <span ng-show="sortType == 'customerMessageAddress' && !sortReverse"></span>
                                <span ng-show="sortType == 'customerMessageAddress' && sortReverse"></span>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in customerContactInfoList | orderBy:sortType:sortReverse | filter:searchCustomers track by item.customerId">
                    <td class="last-name">{{item.customerLastName}}</td>
                    <td class="first-name">{{item.customerFirstName}}</td>
                    <td class="customer-id">{{item.customerId}}</td>
                    <td class="customer-msg-address">
                        <input class="customer-msg-address" size="320" type="text" ng-model=item.customerMessageAddress
                               ng-blur="customerContactInfoSearchController.editDirectMsgAddress(item)">
                      </input>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

我的获取网址看起来像

http://goods.nttf.com/customer-contact-info-ws/data/{userId}

我的帖子和放置网址看起来像

http://goods.nttf.com/customer-contact-info-ws/data/

它无法识别资源中的更新功能。

appvendor.js：3 TypeError：e。$ update不是一个函数在scripts.js：1 在我（appvendor.js：3）在appvendor.js：3 在n。$ digest（appvendor.js：3）在n。$ apply（appvendor.js：3）在g（appvendor.js：2）在r（appvendor.js：2） XMLHttpRequest.w.onload（appvendor.js：2）“可能未处理的拒绝：{}”

Answer 1

您能再解释一下吗？

只需记住$ resource的方法：

var User = $resource('/user/:userId', {userId: '@id'});
User.get({userId: 123}).$promise.then(function(user) {
    user.abc = true;
    user.$save();
});

可以使用以下参数调用类对象或实例对象上的操作方法：

"class" actions without a body: Resource.action([parameters], [success], [error])
"class" actions with a body: Resource.action([parameters], postData, [success], 
[error])
instance actions: instance.$action([parameters], [success], [error])

我知道这不是完整的解决方案，但可以指导您。 https://docs.angularjs.org/api/ngResource/service/ $ resource

请告知我是否可以进一步为您提供更多信息

尝试在AngularJS $ resource调用中使用自定义操作更新值

1 个答案: