Question

我在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>

任何线索？

Answer 1

正如我在评论中所说，javascript中没有echo 'Hello World!'。如果要在DOM上编写该短语，则必须将其用作简单表达式。就像：

$scope.helloWorld = 'Hello World!';

然后在HTML中，您只需将其称为{{helloWorld}}。我看到你正在用一个功能测试它。在这种情况下，你应该return字符串＆＃39; Hello World！＆＃39;像

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

在HTML中：

{{ helloWorld() }}

如果你想简单地＆＃34;记录＆＃34; Hello World!到浏览器的控制台（我怀疑因为你没注意JS错误）：不要使用 console.log();。使用AngularJS＆＃39;内置服务$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!');
    };

})

Answer 2

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

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

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>

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

2 个答案:

更好的代码