將輸入值傳遞給沒有$ 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

好了，你有兩個選擇 - 你可以用觀察家做到這一點，或者用一個函數來獲取結果。我更喜歡後者，但取決於你。這裏是你如何能得到它的工作的例子：

附註 - 學習controller as語法，它會爲你節省數千頭痛的道路與嵌套的作用域和父子關係問題與$scope - here's a great article explaining 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

謝謝，但還有一個問題。如果我把你的代碼放到自調用函數中。那麼代碼不起作用。我試圖避免全局變量並將代碼放在自調用函數中。 – Srdjan

@Srdjan沒有全局變量是用這個代碼創建的。但是爲了好的措施，我在代碼周圍放了一個IIFE，它的工作原理與之前完全一樣。你在改變什麼？ – mhodges

-1

您的模塊定義是錯誤的！

應該

module("calculatorModule", [])

來源

2017-01-23 16:15:03 Sphinx117

不完全是 - 這是不是一個模塊的定義，它是一個模塊的getter定義已經存在一個模塊上的控制器。你只是假定模塊沒有被定義過。 –

這應該是一個評論，因爲它不回答這個問題。另外，您應該指出body標籤上的'ng-app =「appModule」與JS中定義的模塊名稱不匹配。 – mhodges

將輸入值傳遞給沒有$ scope的控制器

回答

相關問題