AngularJS:在一个控制器中具有多个功能

AngularJS : having multiple functions in a controller

本文关键字：功能 控制器 AngularJS 一个      更新时间：2023-10-12

我在AngularJS中有一个简单的控制器，我希望它有两个不同的功能：

var app = angular.module('searchApp', []);
app.controller('searchCtrl', function($scope, $http, $log) {
    //1st function
    $scope.search = function() {
        $http.post('server.php', { "data" : $scope.keywords})
        .success(function(data, status) {
            $scope.result = data;
        })
    };
    //2nd function
    $scope.tableClick = function() {
          $log.log('Hello World!');
    };
})

我认为语法中有一个问题，因为这个脚本只有在我删除第二个函数时才能工作。

当我使用带有2个函数的脚本时（所以，我发布了什么），我得到了以下html元素的｛｛x｝｝：

<tr ng-repeat="x in result">
<td><a href="wwww.test.com" >{{ x }}</a></td>

有线索吗？

正如我在评论中所说，javascript中没有echo 'Hello World!'。如果你想把这个短语写在DOM上，那么你必须把它当作一个简单的表达式。就像：

$scope.helloWorld = 'Hello World!';

然后在HTML中，您可以简单地将其称为{{helloWorld}}。我看到你正在用一个函数测试它。在这种情况下，您应该return字符串"Hello World！"像

$scope.helloWorld = function () {
    return 'Hello World';
};

在HTML:中

{{ helloWorld() }}

如果您想简单地将Hello World!"记录"到浏览器控制台（我对此表示怀疑，因为您没有注意JS错误）：不要使用console.log();。使用AngularJS的内置服务$log代替

一个更好的代码

不管怎样，如果我是你，我会用不同的方式编写代码。参见

var app = angular.module('searchApp', []);
app.controller('searchCtrl', function ($scope, $http, $log) {
    //1st function
    $scope.search = function () {
        $http.post('server.php', { "data" : $scope.keywords })
        .then(function (resp) { //use then instead of success/error
            return resp.data;
        }, function inCaseOfErrors (err) { //named just for teaching purposes
            $log.log(err);
        });
    };
    //2nd function
    $scope.tableClick = function () {
        $log.log('Hello World!');
    };
})

请确保您的$scope.result具有正确的值。还要注意，echo在javascript中并不存在。

在下面的代码中，我取消了服务器调用，并使用了硬编码数据，只是为了测试：

var app = angular.module('searchApp', []);
app.controller('searchCtrl', function($scope, $http) {
    $scope.result = ["apple", "orange", "raisin", "banana"];
    //1st function
    $scope.search = function() {
        //$http.post('server.php', { "data" : $scope.keywords})
        //.success(function(data, status) {
            //$scope.result = data;
        //})
    };
    //2nd function
    $scope.tableClick = function(item) {
        console.log("someone clicked the table! Row: " + item);
    };
})

Html:

<table>
    <tr ng-repeat="item in result">
       <td data-ng-click="tableClick(item)">{{ item }}</td>
    </tr>
</table>
相关文章：