执行angularJS窗口警报不起作用

Execise angularJS windows alert not woring

本文关键字：不起作用 窗口 angularJS 执行      更新时间：2023-09-26

我有一个简单的问题，我复制并粘贴了一些代码，我想在其中显示一个带有值的警报。我只是在学习角度，功能正常（我在其中放置了一个控制台日志并执行它），但window.alert没有出现。

我已经阅读了本教程，并尝试更改变量的名称，但它仍然不起作用。在语言的在线教程中，一切都很顺利，那么我的错误在哪里呢？

这是页面代码：

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

这是控制器代码问候.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);
  };
});

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

您需要在依赖项中包含$window，否则您的控制器将其读取为未定义。

尝试以下操作：

angular.module('greetings', [])
.controller('GreetingsController', function($window) {
  //Rest of your code
  this.greet = function greet(outGree) {
      console.log(outGree);
      $window.alert(outGree);
  };
});

我将$window作为参数添加到控制器的功能中。

问题出现在html代码中：

<button class="btn" ng-click="invoice.greet(greeting.selectedOption)">Greet</button>

应该是：

<button class="btn" ng-click="greeting.greet(greeting.selectedOption)">Greet</button>
相关文章：