2016-05-03 17 views
1

私は単純な問題を抱えていますが、いくつかのコードをコピーして貼り付けました。その中に値を含むアラートを表示したいと思います。私はちょうど角を学んでいるし、fuctionは働いている(私はそれの中にコンソールログを置いて実行される)が、window.alertは現れない。angularJSウィンドウのアラートが表示されない

私はthisチュートリアルを読んで、変数の名前を変更しようとしましたが、まだ動作していません。私の間違いはどこですか?ここで

は、ページのコードです:ここで

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

答えて

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. 

使用するパラメータまたは依存$ウィンドウを追加する必要がありますこのサービス。

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

をこんにちは、それは今働いていますか? – Sravan

+0

JavaScriptにエラーがあります:最後の行に角括弧がありません!!! –

+0

@dotNetBlackBelt、ありがとうございました。 – Sravan

1

あなたの依存関係に$ windowを含める必要があります。そうしないと、コントローラは定義されていないものとして読み込みます。

は、以下のことを試してみてください。

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

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

私はあなたのコントローラの機能へのパラメータとして$ウィンドウを追加しました。

0

問題は、HTMLコードにあった:

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

はされている必要があります。

<button class="btn" ng-click="greeting.greet(greeting.selectedOption)">Greet</button> 
関連する問題