Question

我的代码在下面，我对角度很新。我有一个控制器，我想称之为webservice（已由其他人编写）。在用户输入sku和供应商编号并点击“搜索”后，该调用将会发生。

<div ng-controller="inventorySearchController">

    <div class="container">


        <tbody>
            <tr>
                <td class=""><input ng-model="skuField" type="text"  my-maxlength="10" placeholder="Sku Number" data-ng-model=""/></td>
            </tr>
            <tr>
                <td class=""><input ng-model="mVendorField" type="text"  my-maxlength="10" placeholder="M-Vendor Number"  data-ng-model=""/></td>
            </tr>
            <tr>
                <td class=""><input type="button" class="btn btn-primary btn-lg" ng-click="inventorySearchController.callService()" value="Search" /></td>
            </tr>
        </tbody>

    </div>
</div>

(function() {
    'use strict';
    angular.module('specificLoadApp').controller('inventorySearchController', inventorySearchController);

    inventorySearchController.$inject = ['$scope','$http'];


    function inventorySearchController($scope, $http) {

        var callService = function(){

        var urlSearchService = 'http://myorginaztion.com/services/search';
        var skuVal = $scope.skuField;
        var mVenVal = $scope.mVendorField;
        var xml = "<ItemSearchRequest>"
                        +"<skuid>" + skuVal + "</skuid>"
                        +"<mvendor>" + mVenVal + "</mvendor>"
                    +"</ItemSearchRequest>";

        console.log('calling: ' + urlSearchService);
        $http.post(urlSearchService, xml).
            success(function(data){
                $scope.searchResults = data;
                console.log('call to ' + urlSearchService + ", was a success.");
            });
    };

};
})();

Answer 1

似乎callService未绑定$scope。尝试更改

var callService = function(){

到

$scope.callService = function(){

Answer 2

由于您刚开始使用，请避免使用$ scope，而是使用controller作为语法。

因此，在您加载控制器的div中，将其更改为：

<div ng-controller="inventorySearchController as inventorySearch">

在创建按钮的位置将其更改为：

<td class=""><input type="button" class="btn btn-primary btn-lg" ng-click="inventorySearch.callService()" value="Search" /></td>

然后，在控制器中，更改控制器，使第一行显示为：var vm=this;

最后，将呼叫服务的功能定义更改为：

vm.callService = function(){...}

作为语法的控制器通常被认为是最佳实践，并遵循“如果你没有使用点，你做错了。”

的指导原则。

如果你走这条路，你也不再需要注入$ scope。

如果进行此更改，您的绑定也应该以inventorySearch为前缀。

如何使用控制器调用REST Web服务？

2 个答案: