ng-click或ng-submit不会调用控制器方法

时间:2014-12-10 21:48:13

标签: javascript angularjs asp.net-web-api asp.net-web-api2

我刚刚开始学习Angular JS并下载了Dan Wahlin's Customer Manager App 为了我的手。到目前为止,我已经尝试调用我的Web API来返回所有记录并与View绑定,哪些方法运行良好。 现在我试图添加一个带有提交按钮的文本框来搜索输入的文本,这似乎是角度应用程序的基本功能,但是没有通过单击提交按钮来调用控制器方法:

    <form ng-submit="getSearchResuls(id)">
        <input type="text" data-ng-model="id" class=" novalidate form-control" />
        <input type="submit" value="Search"  />
    </form>

我也尝试过:

        <form >
        <input type="text" data-ng-model="id" class=" novalidate form-control" />
        <input type="submit" value="Search" onclick="getSearchResuls(id)" />
    </form>

两者都不能使用我的以下控制器定义     (function(){

var injectParams = ['$location', '$filter', '$window',
                    '$timeout', 'authService', 'dataService', 'modalService'];

 var CustomersController = function ($location, $filter, $window,
    $timeout, authService, dataService, modalService) {

function getSearchResuls(id) {
        dataService.getSearchResults(id, vm.currentPage - 1, vm.pageSize)
            .then(function (data) {
                vm.totalRecords = data.totalRecords;
                vm.customers = data.results;
                filterCustomers(''); //Trigger initial filter

                $timeout(function () {
                    vm.cardAnimationClass = ''; //Turn off animation since it won't keep up with filtering
                }, 1000);

            }, function (error) {
                $window.alert('Sorry, an error occurred: ' + error.data.message);
            });
    }
};

CustomersController.$inject = injectParams;

angular.module('customersApp').controller('CustomersController', CustomersController);

}());

我还尝试在表单标记中添加 ng-controller ,但仍然没有运气。 我可以用你的宝贵意见来解决这个问题吗?

1 个答案:

答案 0 :(得分:0)

需要将函数getSearchResuls添加到您的范围中。所以,首先,请确保&#39; $ scope&#39;列为injectParams,然后包含$ scope作为CustomersController的参数。然后做这样的事情:

$scope.getSearchResuls = function (id) {
   //the rest of your code here
}