Question

我尝试从输入中计算字符数，如果有多个字符，则显示一条消息。

但我不知道如何将值从函数传递给另一个函数。我希望用HTML表达式传递HTML中的消息，但我不知道如何将另一个带有字符长度的函数传递给$ scope.message;

我错了吗？

(function() {
    'use strict';

    angular.module('LunchChecker', [])

    .controller('LunchCheckerController', LunchCheckerController);

    LunchCheckerController.$inject = ['$scope'];

    function LunchCheckerController($scope) {
        $scope.name = "";
        $scope.totalValue = 0;

        $scope.displayNumeric = function() {

            var totalNameValue = calculateString($scope.name);
            $scope.totalValue = totalNameValue;
            var teste = displayMessage(totalNameValue);
            $scope.sayMessage = teste;

        };

        function displayMessage(quantidade) {
            console.log(quantidade)
            var msg = " "
            if (quantidade <= 30) {
                return msg = "Ok!";
            } else {
                return msg = "Too much!";
            }
        };


        function calculateString(string) {
            var totalStringValue = 0;
            var stringLength = string.length;
            totalStringValue = stringLength;

            return totalStringValue;
        }
    };
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html lang="en">

<head>
<title>Lunch Checker</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/bootstrap.min.css">
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
<style>
    .message {
        font-size: 1.3em;
        font-weight: bold;
    }
</style>
</head>

<body ng-app="LunchChecker">
<div class="container" ng-controller="LunchCheckerController">
    <h1>Lunch Checker</h1>
    <div class="form-group">
        <input id="lunch-menu" type="text" placeholder="list comma separated dishes you usually have for lunch" class="form-control" ng-model="name" ng-keyup="displayNumeric();">
    </div>
    <div class="form-group">
        <button class="btn btn-default" ng-click="displayNumeric();">Check If Too Much</button>
    </div>
    <div class="form-group message">
        <!-- Your message can go here. -->
        {{sayMessage()}}
    </div>
</div>
</body>

</html>

Answer 1

你为自己过度复杂 - 你可以简单地拥有

$scope.sayMessage = function() {
   if($scope.name.length <= 30) {
     return "Ok!";
   } else {
     return  "Too much!";
   }

 };

Angular会自行处理同步，因此您无需检查点击和加密事件。

如果由于任何其他原因需要在函数之间共享变量，您可以随时直接使用$ scope.message - $ scope仍然存在，即使您在函数中（在同一个控制器中）也是如此。

如果要在控制器之间共享变量，可以使用服务

Answer 2

正如 Jakub Judas 所提到的：它可能更简单：

<!--...-->
<input id="lunch-menu" type="text" ng-model="name"></div>
<div class="form-group message">
  {{name.length<30 ? "Ok" : "Too much"}}
</div>
<!--...-->

如果你这样写，你不需要按一下按钮。

<强>更新

我修复了你的代码片段。你不要叫sayMessage。它是一个包含String而不是函数的变量。

你忘了一些;。

(function() {
    'use strict';

    angular.module('LunchChecker', [])

    .controller('LunchCheckerController', LunchCheckerController);

    LunchCheckerController.$inject = ['$scope'];

    function LunchCheckerController($scope) {
        $scope.name = "";
        $scope.totalValue = 0;

        $scope.displayNumeric = function() {
            $scope.totalValue = calculateString($scope.name);
            $scope.sayMessage = displayMessage($scope.totalValue);
        };

        function displayMessage(quantidade) {
            console.log(quantidade);
            var msg = " ";
            if (quantidade <= 30) return msg = "Ok!";
            else return msg = "Too much!";
        };

        function calculateString(string) {
            return string.length;
        }
    };
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html lang="en">

<head>
<title>Lunch Checker</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/bootstrap.min.css">
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
<style>
    .message {
        font-size: 1.3em;
        font-weight: bold;
    }
</style>
</head>

<body ng-app="LunchChecker">
<div class="container" ng-controller="LunchCheckerController">
    <h1>Lunch Checker</h1>
    <div class="form-group">
        <input id="lunch-menu" type="text" placeholder="list comma separated dishes you usually have for lunch" class="form-control" ng-model="name" ng-keyup="displayNumeric();">
    </div>
    <div class="form-group">
        <button class="btn btn-default" ng-click="displayNumeric();">Check If Too Much</button>
    </div>
    <div class="form-group message">
        <!-- Your message can go here. -->
        {{sayMessage}}
    </div>
</div>
</body>

</html>

只是一个提示：尽量避免许多空行

在Angular 1x

2 个答案: