関数間に値を渡す角度1x

-1

入力から文字を数えようとしていて、文字数がある場合はメッセージを表示します。関数間に値を渡す角度1x

しかし、関数から別の値に値を渡す方法はわかりません。私は式で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>

出典

2016-10-30 gise

あなたは自分自身でそれを過度に複雑されている - あなたは単にあなたがチェックする必要はありませんので、角度は、それ自体で同期の世話をします

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

};

を持つことができますクリックイベントとキーアップイベント。

他の理由で関数間で変数を共有する必要がある場合は、同じコントローラ内の関数であっても$ scope.message - $ scopeがそのまま使用できます。

あなたは、コントローラ間で変数を共有したい場合は、あなたが言及したヤクブユダなどのサービス

出典

2016-10-30 21:40:20

あなたは正しいです、ありがとう、多くの空行を回避しようと、私は最初のアイデアを失いました。 – gise

今私は別の疑問を持っています.Javascriptでは関数を作成して値を渡したいときに、引数like function（value1、value2）を入れます。私は "return totalStringValue;をキャッチしようとするこの関数の関数displayMessage（quantidade）{ただし、引数は未定義です。この機能は単なる試験のテストです。 – gise

@gise私は正しく理解しているかわかりませんが、関数displayMessage（）にパラメータを受け取らせたい場合は、スコープ（$ scope.displayMessage = function（）...）で定義して渡しますテンプレートからのパラメータ（つまり、scope.messageをパラメータとして使用する場合は、ng-click = "displayMessage（messsage）"のようにしてください） –

を使用することができます。それは単純かもしれない：

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

あなたがそのように記述する場合、あなたはしないでくださいボタンを押す必要があります。

更新

私はあなたのスニペットを修正しました。あなたはsayMessageを呼び出さない。これは、関数ではなく文字列を含む変数です。

;を忘れました。

(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>

ちょうどヒント：

出典

2016-10-30 21:47:42 rala

ありがとう、私はまだ機能がAngularでどのように機能しているか理解しています。 – gise

@gise私の投稿を更新してコードを修正しました – rala

解決策をありがとうございました – gise

関数間に値を渡す角度1x

答えて

関連する問題