用'ControllerAs'語法使用ng-submit調用一個函數

使用ng-submit，我試圖在我的MainController中調用一個函數。但是，函數搜索沒有被調用。我假設我需要angularify我的功能，但不知道如何。用'ControllerAs'語法使用ng-submit調用一個函數

的index.html

<html ng-app="main"> 
    <head> 
     <script src="angular.min.js"></script> 
     <script src="script.js"></script> 
    </head> 

    <body ng-controller="MainController as mainCtrl"> 
     <p>{{mainCtrl.message}}</p> 

     <div> 
      {{mainCtrl.error}} 
     </div> 

     <form ng-submit="search()"> 
      <input type="search" required placeholder="Username to find" ng-model="mainCtrl.username"/> 
      <input type="Submit" value="Search"/> 
     </form> 

     <div>Name: {{mainCtrl.user.name}}</div> 
     <div>Location: {{mainCtrl.user.location}}</div> 
     <div> 
      <img ng-src="{{mainCtrl.user.avatar_url}}" title="{{mainCtrl.user.name}}"/> 
     </div> 
    </body> 
</html>

的script.js

(function() {  

    angular.module("main", []) 
     .controller("MainController", ["$scope", "$http",MainController]); 

    function MainController($scope, $http) { 

     function onUserComplete($response) { 
      $scope.user = $response.data; 
     }; 

     function onError(reason) { 
      $scope.error = "Could not fetch the user"; 
     }; 

     function search() { 
      $http.get("https://api.github.com/users/" + this.username) 
       .then(onUserComplete, onError); 
       console.log("1"); 
     }; 

     $scope = this; 
     this.message = "GitHub viewer!"; 
     this.username = "angular"; 
    }; 
}());

來源

2015-07-19 LinhSaysHi

'search'不在'$ scope'中... – elclanrs

因爲您在ng控制器中使用了...'as'，所以您可以使用mainCtrl.search（）來調用它。 https://docs.angularjs.org/api/ng/directive/ngController –

我將其更改爲mainCtrl.search（），並沒有解決任何問題。必須也是別的東西？ – LinhSaysHi

它看起來像你沒有範圍的搜索功能。

如果您使用控制器作爲語法，您可以通過一種方法來實現，這會讓事情變得更簡單。實際上，你根本不需要$ scope。

在您的控制器中將命名控制器命名爲vm，您的視圖將在所有問題上保持類似。

vm代表視圖模型。 Check out this style guide by John Papa，它真的簡化了我的角碼，並幫助它更有意義。

忽略風格指南，一個簡單的答案是添加vm.search()，而不是僅僅search()您ng-submit

index.html

<html ng-app="main"> 
    <head>`enter code here` 
     <script src="angular.min.js"></script> 
     <script src="script.js"></script> 
    </head> 

    <body ng-controller="MainController as vm"> 
     <p>{{vm.message}}</p> 

     <div> 
      {{vm.error}} 
     </div> 

     <form ng-submit="vm.search()"> 
      <input type="search" required placeholder="Username to find" ng-model="vm.username"/> 
      <input type="Submit" value="Search"/> 
     </form> 

     <div>Name: {{vm.user.name}}</div> 
     <div>Location: {{vm.user.location}}</div> 
     <div> 
      <img ng-src="{{vm.user.avatar_url}}" title="{{vm.user.name}}"/> 
     </div> 
    </body> 
</html>

script.js

(function() {  

    angular.module("main", []) 
     .controller("MainController", ["$http", MainController]); 

    function MainController($http) { 
     var vm = this; 

     vm.onUserComplete = onUserComplete; 
     vm.onError = onError; 
     vm.search = search; 
     vm.message = "GitHub viewer!"; 
     vm.username = "angular"; 

     function onUserComplete($response) { 
      vm.user = $response.data; 
     }; 

     function onError(reason) { 
      vm.error = "Could not fetch the user"; 
     }; 

     function search() { 
      $http.get("https://api.github.com/users/" + vm.username) 
       .then(onUserComplete, onError); 
       console.log("1"); 
     }; 
    }; 
}());

有很多的東西在該風格指南將簡化您編寫角碼的方式，這是一個很好的起點。

來源

2015-07-19 00:25:27 TheSporkBaron

非常感謝。我非常欣賞風格指南，因爲我剛開始學習AngularJS。你認爲這是一個角度規範嗎？我在問，因爲我正在努力養成良好的習慣，並希望儘早開始。我在你給我的代碼中注意到的一點是「MainController as vm」。我們是否也會在其他控制器的'vm'上命名？ – LinhSaysHi

我不確定角度是什麼規範。我已經看到了很多不同的方式來做所有事情，當您查看教程或通過其他人的代碼，每個人都略有不同時，這會變得很艱難。我剛剛看到了這個人（在這裏）（https://www.youtube.com/watch?v=UlvCbnKAH3g）的一次演講，並提出了他的建議，因爲它非常一致並且遵循了很多良好的基本JavaScript習慣，無理由給出建議。是的，我已經在每個控制器上使用了vm。 – TheSporkBaron

用'ControllerAs'語法使用ng-submit調用一個函數

回答

相關問題