AngularJS：在控制器中具有多种功能答案

【问题标题】：AngularJS : having multiple functions in a controllerAngularJS：在控制器中具有多种功能
【发布时间】：2018-02-03 23:46:02
【问题描述】：

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

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!'。解释你想用这个实现什么，因为代码在很多方面都是错误的。
我想制作一个有 2 个按钮的应用程序，每个按钮调用一个不同的函数。对不起echo，我有点累了。我对 console.log 也有同样的问题
绝对没有理由不能拥有两个不同的$scope 属性，它们都是这样的功能。如果您已经替换了echo 语句并且仍然遇到问题，您应该考虑更新问题中的代码，而不是在评论中提及其他一些未知的组合，因为这似乎是许多人关注的主要问题时刻。

标签： javascript angularjs

【解决方案1】：

正如我在 cmets 中所说，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!');
    };

})

【讨论】：

您的第二个解决方案效果很好，非常感谢。我理解了这个问题。

【解决方案2】：

请确保您的 $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>

【讨论】：