Angular URIへの投稿

Question

フォームにデータを入力するとき、私のapiが動作することが証明され、CRUD要求がカールしているにも関わらず、私の角度コードがapiに投稿されていません。レジスタ機能は、コントローラは、ユーザのサービスを使用して登録し、APIをモデルに

ユーザーサービス

(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .factory('UserService', UserService); 

    UserService.$inject = ['$http']; 
    function UserService($http) { 
     var service = {}; 

     service.GetAll = GetAll; 
     service.GetById = GetById; 
     service.GetByUsername = GetByUsername; 
     service.Create = Create; 
     service.Update = Update; 
     service.Delete = Delete; 

     return service; 

     function GetAll() { 
      return $http.get('https://me.com/api/users/').then(handleSuccess, handleError('Error getting all users')); 
     } 

     function GetById(id) { 
      return $http.get('https://me.com/api/users/' + id).then(handleSuccess, handleError('Error getting user by id')); 
     } 
... 

    function Create(user) { 
     return $http.post('https://me.com/api/users', user).then(handleSuccess, handleError('Error creating user')); 
    } 

..... 

登録部分

<div ng-controller="RegisterController as vm"> 
<div class="col-md-6 col-md-offset-3"> 
    <h2>Register</h2> 
    <form name="form" ng-submit="vm.register()" role="form"> 
     <div class="form-group" ng-class="{ 'has-error': form.fname.$dirty && form.fname.$error.required }"> 
      <label for="username">First name</label> 
      <input type="text" name="fname" id="fname" class="form-control" ng-model="vm.user.fname" required /> 
      <span ng-show="form.fname.$dirty && form.fname.$error.required" class="help-block">First name is required</span> 
     </div> 
     <div class="form-group" ng-class="{ 'has-error': form.lname.$dirty && form.lname.$error.required }"> 
      <label for="username">Last name</label> 
      <input type="text" name="lname" id="Text1" class="form-control" ng-model="vm.user.lname" required /> 
      <span ng-show="form.lname.$dirty && form.lname.$error.required" class="help-block">Last name is required</span> 
     </div> 
     <div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }"> 
      <label for="username">Username</label> 
      <input type="text" name="username" id="username" class="form-control" ng-model="vm.user.username" required /> 
      <span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span> 
     </div> 
     <div class="form-group" ng-class="{ 'has-error': form.hashword.$dirty && form.hashword.$error.required }"> 
      <label for="hashword">Password</label> 
      <input type="hashword" name="hashword" id="hashword" class="form-control" ng-model="vm.user.hashword" required /> 
      <span ng-show="form.hashword.$dirty && form.hashword.$error.required" class="help-block">Password is required</span> 
     </div> 
     <div class="form-actions"> 
      <button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Register</button> 
      <img ng-if="vm.dataLoading" src="data:image/gif;base64,..." /> 
      <a href="#/login" class="btn btn-link">Cancel</a> 
     </div> 
    </form> 
</div> 

</div> 

登録をフォームに投稿する機能を登録し、私の部分から呼び出されますコントローラ/機能

(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .controller('RegisterController', RegisterController); 

    RegisterController.$inject = ['UserService', '$location', '$rootScope', 'FlashService']; 
    function RegisterController(UserService, $location, $rootScope, FlashService) { 
     var vm = this; 

     vm.register = register; 

     function register() { 
      vm.dataLoading = true; 
      UserService.Create(vm.user) 
       .then(function (response) { 
        if (response.success) { 
         FlashService.Success('Registration successful', true); 
         $location.path('/login'); 
        } else { 
         FlashService.Error(response.message); 
         vm.dataLoading = false; 
        } 
       }); 
     return false; 
     } 
    } 

})(); 

Answer 1

コントローラはビ​​ューに？ controller as構文を使用しましたか？例： <div ng-controller="RegisterController as vm">your view here </div> レジスタ関数をvmに割り当てていますが、vmはコントローラ関数内のローカル変数に過ぎません。したがって、angular関数はビュー内でその関数を使用することはできません。 ローカルのvm変数にthisを代入することは、すべての場所で$ scopeを使用するよりも優れていますが、それでもコントローラー関数の有効範囲内のローカル変数です。コントローラーを表示して名前を変更する（<div ng-controller="RegisterController as vm">）ようにコントローラーを割り当てると、それは機能します。