CODEWITHSUNDEEP
javascriptangularjs
softwareplay
softwareplay

Reputation: 1409

Execise angularJS windows alert not woring

i've a simple problem, i've copied and pasted some code and i'd like to show an alert with a value inside it. I'm just learning angular and the fuction works (i've places a console log inside it and it is executed), but the window.alert doesn't appear.

I've read this tutorial and tried changing the name of variable but it's still not working. In the online tutorial of angual everything is going fine so where is my mistake?

Here is the page code:

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

Here is the controller code 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);
  };
});

Upvotes: 2

Views: 2186

Answers (3)

Sravan
Sravan

Reputation: 18657

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.

you should add the parameter or the dependency $window to use this service.

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

Upvotes: 3

softwareplay
softwareplay

Reputation: 1409

the problem was in the html code:

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

should have been:

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

Upvotes: 1

FvB
FvB

Reputation: 723

You need to include $window in your dependencies, or else your controller reads it as undefined.

Try the following:

angular.module('greetings', [])
.controller('GreetingsController', function($window) {
  //Rest of your code

  this.greet = function greet(outGree) {
      console.log(outGree);
      $window.alert(outGree);
  };
});

I added $window as a parameter to the function of your controller.

Upvotes: 2

Related Questions