我有一个简单的问题,我已经复制并粘贴了一些代码,我想在其中显示一个带有值的警报。我只是学习角度和功能(我将控制台日志放在其中并执行),但window.alert不会出现。
我已阅读this教程,并尝试更改变量的名称,但它仍无效。在online tutorial中,一切都很好,所以我的错误在哪里?
以下是页面代码:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script type="text/javascript" charset="utf-8" src="greetings.js"></script>
</head>
<body>
<h1>Greetings</h1>
<div ng-app="greetings" ng-controller="GreetingsController as greeting">
<b>Greetings:</b>
<div>
Name: <input type="text" min="0" ng-model="greeting.name" required >
</div>
<div>
FamilyName: <input type="text" ng-model="greeting.familyName" required >
<select
data-ng-options="c for c in greeting.tipi" data-ng-model="greeting.selectedOption">
<!--<option ng-repeat="c in greeting.tipi">{{c}}</option>-->
</select>
</div>
<div>
<b>Greeting:</b>
<span>
{{greeting.total(greeting.selectedOption)}} {{greeting.name}} {{greeting.familyName}}
<button class="btn" ng-click="invoice.greet(greeting.selectedOption)">Greet</button>
<br/>
</span>
</div>
</div>
</body>
</html>
这是控制器代码greetings.js:
angular.module('greetings', [])
.controller('GreetingsController', function() {
this.name = "Name";
this.familyName = "FamilyName";
this.tipi = ["Hello", "Good Morning", "Good Afternoon", "Good evening"];
this.selectedOption = this.tipi[0];
this.total = function total(outGree) {
console.log(outGree);
return outGree;
};
this.greet = function greet(outGree) {
console.log(outGree);
$window.alert(outGree);
};
});
答案 0 :(得分:2)
To use an Angular service, you add it as a dependency for the component (controller, service, filter or directive) that depends on the service.
And $window is a service.
您应该添加参数或依赖 $ window 以使用此服务。
angular.module('greetings', [])
.controller('GreetingsController', ['$window', function($window) {
this.name = "Name";
this.familyName = "FamilyName";
this.tipi = ["Hello", "Good Morning", "Good Afternoon", "Good evening"];
this.selectedOption = this.tipi[0];
this.total = function total(outGree) {
console.log(outGree);
return outGree;
};
this.greet = function greet(outGree) {
console.log(outGree);
$window.alert(outGree);
};
}]);
答案 1 :(得分:1)
您需要在依赖项中包含$ window,否则您的控制器会将其视为未定义。
尝试以下方法:
angular.module('greetings', [])
.controller('GreetingsController', function($window) {
//Rest of your code
this.greet = function greet(outGree) {
console.log(outGree);
$window.alert(outGree);
};
});
我添加了$ window作为控制器功能的参数。
答案 2 :(得分:0)
问题出在html代码中:
<button class="btn" ng-click="invoice.greet(greeting.selectedOption)">Greet</button>
应该是:
<button class="btn" ng-click="greeting.greet(greeting.selectedOption)">Greet</button>