AngularJS ng-click funktioniert nicht mit ControllerAs aus dem $ routeProvider

Question

Ich lehre mich mit Angular, und ich schreibe eine kleine Anwendung dafür. Ich folge dem John Paul's Angular Style Guide und arbeite mit Controllern, nicht $ scope (Y030).

Das Problem ist, wenn ich etwas wie ng-click = "vm.doSomething()" in einer ng-view-Vorlage verwenden, wird das Ereignis nicht ausgelöst. Keine Nachrichten von der Konsole. Wenn ich $ scope verwende, funktioniert die Anwendung.

Um es funktionieren zu lassen, ersetzen Sie einfach "greet.configure()" durch "configure()".

Irgendwelche Hinweise?

https://github.com/ajkret/spring-boot-sample/tree/controllerAs-ngView-ngClick-problem

---

Hier ist der Routing-Code:

Die vollständige Anwendung finden Sie hier

(function() { 
    'use strict'; 

    angular.module('app').config([ '$routeProvider', routing ]); 

    function routing($routeProvider) { 
     $routeProvider.when('/greet', { 
      templateUrl : 'app/components/greet/greet.html', 
      controller : 'GreetingCtrl', 
      controllerAs : 'greet' 
     }).when('/config', { 
      templateUrl : 'app/components/config/config.html', 
      controller : 'ConfigCtrl', 
      controllerAs : 'config' 
     }).otherwise({ 
      redirectTo : '/greet' 
     }); 
    } 

})(); 

Hier ist die Vorlage:

<div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6"> 
     <div class="panel panel-default"> 
      <div class="panel-heading">Presentation</div> 
      <div class="panel-body">Here is the message of the day</div> 
     </div> 
    </div> 

    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6"> 
     <div class="panel panel-default"> 
      <div class="panel-heading">Result from Server</div> 
      <div class="panel-body"> 
       <h3>{{greet.message}}</h3> 
       <button type="button" class="btn btn-primary" ng-click="greet.configure()">Configure</button> 
      </div> 
     </div> 
    </div> 
</div> 

Und hier ist der Controller:

(function() { 
    'use strict'; 

    angular.module('app').controller('GreetingCtrl', GreetController); 

    GreetController.$inject = ['GreetingService','$location','$scope']; 

    function GreetController($service, $location, $scope) { 
     var controller = this; 
     var message; 

     function get() { 
      $service.get(function(greet) { 
       controller.message = greet.message; 
      }); 
     } 

     function configure() { 
      $location.url('config'); 
     } 

     $scope.configure = configure; 

     // Bootstrap 
     get(); 
    } 
})(); 

Answer 1

Nach einiger Zeit gab ich auf und folgte der Linie alle anderen auf Angular tut:

I gab die $ routeProvider-Zuordnung auf und fügte ein div hinzu, das auf den Controller zeigte. Das scheint alles zu funktionieren. Könnte das ein Bug von Angular sein? Ich weiß es nicht.

Nach ein paar Neustarts, laden Sie die Seite neu, es hat funktioniert.

<div ng-controller="GreetingCtrl as ctrl"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6"> 
      <div class="panel panel-default"> 
       <div class="panel-heading">Presentation</div> 
       <div class="panel-body">Here is the message of the day</div> 
      </div> 
     </div> 

     <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6"> 
      <div class="panel panel-default"> 
       <div class="panel-heading">Result from Server</div> 
       <div class="panel-body"> 
        <h3>{{ctrl.message}}</h3> 
        <button type="button" class="btn btn-primary" ng-click="ctrl.configure()">Configure</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

$scope.configure = configure; ersetzen, für controller.configure = configure;

Answer 3

Bei der Verwendung von controllerAs Sie Ihre Modelldaten und Methoden, um this in der Steuerung binden müssen, die Sie mit variabler controller

verwiesen haben

Änderung:

$scope.configure = configure; 

Um

controller.configure = configure; 

Sie werden nur oder $scope für Dinge wie Winkelereignisse benötigen oder Uhren