当我使用$ 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>
无法理解我在做什么。
最佳答案
您错过的只是一个很小的细节:
在工作代码中: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>