Question

我遇到以下代码问题。我可以使用$ scope解决问题，但是这次请求不使用控制器中的$ scope。我使用“控制器as”来控制视图。

<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;
        }
})();

Answer 1

嗯，你有两个选择 - 你可以使用观察者，或者使用函数来获得结果。我更喜欢后者，但它取决于你。以下是如何使其发挥作用的示例：

附注 - 了解controller as语法，通过$scope - here's a great article explaining controller as

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您的模块定义是错误的！

应该是

module("calculatorModule", [])

将值从输入传递到控制器而不使用$ scope

2 个答案: