"Wie" Angular ng-Controller funktioniert nicht wie erwartet

Question

Die doc lässt mich denken, dass unten, sollte ich ng-click="ctrl.nextDay()" wegen "GameController as ctrl" verwenden. In diesem Fall passiert jedoch nichts und es werden keine Fehler gemeldet. Nur funktioniert ng-click="nextDay()".

<div ng-controller="GameController as ctrl" > 
<div class="panel panel-default"> 
    <button type="button" class="btn btn-info" ng-click="nextDay()" > 
     <span class="glyphicon glyphicon-step-forward" aria-hidden="true">Next Day 
    </button> 
</div> 

Die Steuerung ist wie folgt definiert:

angular.module('FEModule') 
.controller('GameController', ['$scope', '$http', '$fancyModal', 
    function($scope, $http, $fancyModal) { 

     console.log("GameController is instantiated! Yeah."); 

     $scope.nextDay = function() { 
       console.log("this is next day function!");      
     } 

Was ist der Grund dafür?

Answer 1

nextDay() ist eine Funktion von $ scope. Es ist also nicht an den Controller angeschlossen und wird in der Ansicht wie jede andere Funktion des Oszilloskops mit nextDay() aufgerufen.

Wenn Sie ihm eine Funktion, die an die Steuerung machen wollen, und damit ctrl.nextDay() in der Ansicht zu verwenden, muss der Code in der Steuerung

this.nextDay = function() { 
     console.log("this is next day function!");      
    } 

Answer 2

Bind nextDay() an die Controller-Instanz sein oder controller as entfernen Syntax und verwende $ scope.

Lösung A

<div ng-controller="GameController as ctrl" > 
<div class="panel panel-default"> 
    <button type="button" class="btn btn-info" ng-click="ctrl.nextDay()" > 
     <span class="glyphicon glyphicon-step-forward" aria-hidden="true">Next Day 
    </button> 
</div> 

Lösung B

<div ng-controller="GameController" > 
<div class="panel panel-default"> 
    <button type="button" class="btn btn-info" ng-click="nextDay()" > 
     <span class="glyphicon glyphicon-step-forward" aria-hidden="true">Next Day 
    </button> 
</div>