Question

当我使用$ scope对象来绑定函数和变量，并在HTML中相应地进行更改时，代码工作正常，但不能使用此对象。

var app = angular.module("myApp", []);
app.controller("myCtrl", myCtrl);
function myCtrl()
{
  console.log("registering app");
  this.valueOne="0";
  this.valueTwo="0";
  this.result="0";
  this.add=function () {
    console.log("in add");
      this.result=parseFloat(this.valueOne)+parseFloat(his.valueTwo);
      valueOne="";
      valueTwo="";
  }
  this.subtract=function () {
      this.result=parseFloat(this.valueOne)-parseFloat(his.valueTwo)
      valueOne="";
      valueTwo="";
  }

  this.multiply=function()  {
      this.result=parseFloat(this.valueOne)*parseFloat(his.valueTwo)
      valueOne="";
      valueTwo="";
  }
  this.divide=function()  {
      this.result=parseFloat(this.valueOne)/parseFloat(his.valueTwo)
      valueOne="";
      valueTwo="";
  }
}

<!DOCTYPE html>
<html lang="en-US">
<script src="angular.js"></script>
<script src="app.js"></script>
<body>

<div ng-app="myApp" >

  <div ng-controller="myCtrl">
 <p>Value 1 : <input type="text" ng-model="myCtrl.valueOne" placeholder="Value 1"></br>
   Value 2 : <input type="text" ng-model="myCtrl.valueTwo" placeholder="Value 2"></br>
<button ng-click="myCtrl.add()">Add</button>
<button ng-click="myCtrl.subtract()">subtract</button>
<button ng-click="myCtrl.divide()">divide</button>
<button ng-click="myCtrl.multiply()">multiply</button>
 </p>
 <h1>Calculation Result {{myCtrl.result}}</h1>
</div>

</div>
</body>
</html>

从我参考的地方，它在那里工作正常

var app = angular.module("calculatorApp", []);
app.controller("CalculatorCtrl", CalculatorCtrl);

function CalculatorCtrl() {
    this.resultValue = 0;
    this.buttonClicked = function(button) {
        this.selectedOperation = button;
    }
    this.computeResult = function() {
        var number1 = parseFloat(this.input1);
        var number2 = parseFloat(this.input2);
        if (this.selectedOperation === '+') {
            this.resultValue = number1 + number2;
        }
        else if (this.selectedOperation === '-') {
            this.resultValue = number1 - number2;
        }
        else if (this.selectedOperation === '*') {
            this.resultValue = number1 * number2;
        }
        else if (this.selectedOperation === '/') {
            this.resultValue = number1 / number2;
        }



    }


}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<html ng-app="calculatorApp">

    <head>
        <title>Calculator App</title>
        <script src='angular.js'></script>
        <script src='app.js'></script>
    </head>

    <body>
        <h1>Calculator App</h1>
        <div ng-controller="CalculatorCtrl as ctrl">
            <input type="text" ng-model="ctrl.input1"></input>
            <span ng-bind="ctrl.selectedOperation"></span>
            <input type="text" ng-model="ctrl.input2"></input>
            <button ng-click="ctrl.computeResult()">=</button>
            <span ng-bind="ctrl.resultValue"></span>
            <p>
                Choose operation:
                <button ng-click="ctrl.buttonClicked('+')">+</button>
                <button ng-click="ctrl.buttonClicked('-')">-</button>
                <button ng-click="ctrl.buttonClicked('*')">*</button>
                <button ng-click="ctrl.buttonClicked('/')">/</button>
            </p>
            
        </div>
        
    </body>

</html>

无法得到我做错的事。

Answer 1

你错过的是一个微小的细节：

在工作代码中：

ng-controller="CalculatorCtrl as ctrl"它有这个。

你的代码：

ng-controller="myCtrl"有这个。 表示您的HTML代码没有控件的引用。

您可以将其更改为ng-controller="myCtrl as myCtrl"，它应该可以正常工作！

此外，您的代码段在控制器方法中出现his而不是this。修正了那些。以下是您的工作片段：

var app = angular.module("myApp", []);
app.controller("myCtrl", myCtrl);
function myCtrl()
{
  console.log("registering app");
  this.valueOne="0";
  this.valueTwo="0";
  this.result="0";
  this.add=function () {
    console.log("in add");
      this.result=parseFloat(this.valueOne)+parseFloat(this.valueTwo);
      valueOne="";
      valueTwo="";
  }
  this.subtract=function () {
      this.result=parseFloat(this.valueOne)-parseFloat(this.valueTwo)
      valueOne="";
      valueTwo="";
  }

  this.multiply=function()  {
      this.result=parseFloat(this.valueOne)*parseFloat(this.valueTwo)
      valueOne="";
      valueTwo="";
  }
  this.divide=function()  {
      this.result=parseFloat(this.valueOne)/parseFloat(this.valueTwo)
      valueOne="";
      valueTwo="";
  }
}

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<script src="app.js"></script>
<body>

<div ng-app="myApp" >

  <div ng-controller="myCtrl as myCtrl">
 <p>Value 1 : <input type="text" ng-model="myCtrl.valueOne" placeholder="Value 1"></br>
   Value 2 : <input type="text" ng-model="myCtrl.valueTwo" placeholder="Value 2"></br>
<button ng-click="myCtrl.add()">Add</button>
<button ng-click="myCtrl.subtract()">subtract</button>
<button ng-click="myCtrl.divide()">divide</button>
<button ng-click="myCtrl.multiply()">multiply</button>
 </p>
 <h1>Calculation Result {{myCtrl.result}}</h1>
</div>

</div>
</body>
</html>

无法使用angularJS控制器附加变量和函数

从我参考的地方，它在那里工作正常

1 个答案: