$ scopeなしで入力からコントローラに値を渡す

次のコードに問題があります。私は$ scopeを使って問題を解決することができますが、今度はコントローラで$ scopeを使わずにそれを行うよう要求します。私はビューを制御するために "コントローラとして"使用しています。

<body ng-app="appModule" > 
<div ng-controller="calculatorController as calc"> 

<input type="number" name="firstDigit" placeholder="insert num" ng-model="calc.firstDigit"> 

<input type="number" name="secondDigit" placeholder="insert num" ng-model="calc.secondDigit"> 

<span>{{calc.result}}</span> 

</div> 
</body> 

(function(){ 
    angular 
     .module("calculatorModule") 
     .controller("calculatorController", calculatorController) 
      function calculatorController(){ 
       var calc = this; 
       calc.result = calc.firstDigit + calc.secondDigit; 
     } 
})();

出典

2017-01-23 Srdjan

まあすべきであり、次の2つのオプションを持っている - あなたは結果を得るためにウォッチャーで、または機能でそれを行うことができます。私は後者が好きですが、それはあなた次第です。 here's a great article explaining controller as

- 、それは $scopeとネストされたスコープと親子関係の問題で道あなたの頭痛の何千もの節約になります controller as構文を学ぶ -

サイドノート：ここではあなたはそれが仕事を得ることができる方法の例です。

(function() { 
 
    angular.module("calculatorModule", []) 
 
    .controller("calculatorController", [function() { 
 
     var calc = this; 
 
     calc.getResult = function() { 
 
      return calc.firstDigit + calc.secondDigit; 
 
     } 
 
     calc.result = calc.getResult(); 
 
    }]); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="calculatorModule" ng-controller="calculatorController as calc"> 
 

 
    <input type="number" name="firstDigit" placeholder="insert num" ng-model="calc.firstDigit"> 
 

 
    <input type="number" name="secondDigit" placeholder="insert num" ng-model="calc.secondDigit"> 
 

 
    <span>{{calc.getResult()}}</span> 
 

 
</div>

出典

2017-01-23 16:18:07 mhodges

ありがとうございますが、もう1つ質問です。自分のコードを自己呼び出し関数に置き換えた場合。コードが機能しない。グローバル変数を避け、自己呼び出し関数にコードを配置しようとしています。 – Srdjan

@Srdjanこのコードでは、グローバル変数は作成されません。しかし、適切な尺度のために、私は自分のコードの周りにIIFEを配置しています。あなたは何かを変えていますか？ – mhodges

-1

モジュール定義が偽です！

が

module("calculatorModule", [])

出典

2017-01-23 16:15:03 Sphinx117

正確にはない - すでに存在しているモジュール上のコントローラを定義するためのモジュールゲッターで、モジュール定義ではありません。あなたは、モジュールが以前に定義されていないと仮定しました。 –

質問には答えられないので、これはコメントでなければなりません。また、bodyタグの 'ng-app =" appModule "がJSで定義されたモジュール名と一致しないことを指摘してください。 – mhodges

$ scopeなしで入力からコントローラに値を渡す

答えて

関連する問題