AngularJS ng-click無法與$ routeProvider中的controllerAs一起使用

我正在用Angular自學，我正在爲此編寫一個小應用程序。我遵循John Papa的Angular Style Guide，並使用控制器而不是$ scope（Y030）。

問題是當我在ng-view模板中使用類似ng-click =「vm.doSomething（）」的東西時，事件不會被觸發。沒有來自控制檯的消息。如果我使用$範圍，則該應用程序有效。

要使其工作，只需將「greet.configure（）」替換爲「configure（）」即可。

任何提示？

完整的應用程序可以在這裏找到：

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

下面是路由代碼：

(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' 
     }); 
    } 

})();

這裏是模板：

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

這裏是控制器：

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

來源

2016-03-26 ajkret

一段時間後，我放棄了，跟着行大家對角別人在做：

我放棄了$ routeProvider映射並添加了一個指向控制器的div。這似乎使一切工作。這可能是Angular的一個bug嗎？我不知道。

幾次重新啓動後，重新加載頁面，它工作。

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

來源

2016-03-26 23:26:09 ajkret

這裏是完整的應用程序https://github.com/ajkret/spring-boot-sample – ajkret

有時我在Chrome中遇到緩存問題。我更喜歡使用Firefox。 – andreshg112

更換$scope.configure = configure;，爲controller.configure = configure;

來源

2016-03-26 19:28:16 andreshg112

沒有區別 – ajkret

它沒有區別。實際上，表達式{{}}工作得很好，但引號（標籤）之間沒有任何作用。 – ajkret

在GreetingCtrl中試試這個：'function configure（）{ console.log（「Inside configure」）; $ location.url（'config'）; }'。 'controller.configure = configure;'。這在視圖中：'ng-click =「greet.configure（）」'。看你的控制檯。如果顯示「內部......」，則問題在於服務。你說過你試過了，但你能再試一次嗎？ – andreshg112

當使用controllerAs你需要你的模型和方法綁定到控制器this您已具有可變controller

引用

更改：

$scope.configure = configure;

要

controller.configure = configure;

你只需要或使用$scope對於像角事件或手錶

來源

2016-03-26 19:28:33 charlietfl

沒有什麼區別 – ajkret

不知道什麼時候你說它正在工作 – charlietfl

是的，我說過，但是我被高速緩存所欺騙。 – ajkret

AngularJS ng-click無法與$ routeProvider中的controllerAs一起使用

回答

相關問題