$ httpの角度1データバインディングは動作しません

Question

フォームを送信するための角型テンプレートを示すadd new userボタンがあるページがあります。フォーム提出方法は、submitメソッドUser Controllerにバインドされています。フォームはサーバーに送信され、応答は取得されますが、コード$scope.users = []は機能しません。私はconsole.log($scope.users)がすでにリストされているユーザーを表示していることを確認しましたが、$scope.users = []行のためにビューから削除されることが予想されますが、これは起こりません。ここにデータバインドに問題があるようです。

users.html：

<div ng-controller = "UserController as uc"> 
    /***** table was omitted ********/ 
    <button type="button" ng-click="showForm()" class="btn btn-info">show new form</button> 
    <div ng-show="pc.formVisible" ng-include="'assets/templates/new_user.html'"></div> 
</div> 

new_user.html：

<div class="new-user-form"> 
    <form ng-submit="submit()" ng-controller="UserController"> 
     /******* form groups omitted *********/ 
     <button type="submit" class="btn btn-default">submit!</button> 
    </form> 
</div> 

app.js：

(function() { 
    var app = angular.module('MyStock', ['ui.bootstrap']); 

    app.controller('UserController', ['$scope', '$http', '$uibModal', function($scope, $http, $uibModal) { 
     $scope.users = []; 
     var formVisible = false; 
     var cntl = this; 
     cntl.formVisible = false; 
     $http.get('http://127.0.0.1:8080/api/customers', method='jsonp').success(function (data) { 
      $scope.users = data; 
     }); 

     $scope.showForm = function() { 
      cntl.formVisible = true; 
     }; 

     $scope.submit = function() { 
      $http({ 
       method: 'POST', 
       url  : 'http://127.0.0.1:8080/api/customers', 
       data: $scope.user, 
       headers : {'Content-Type': 'application/x-www-form-urlencoded'} 
      }).then(function(response) { 
       console.log($scope.users); 
       $scope.users = []; 
      }); 
     }; 

    }]); 
})(); 

Answer 1

ここで問題となるのは、2つのコントローラがあり、スコープを変更することです。 親コントローラがUserController as uc、2番目のコントローラがあり、エイリアスはありません。問題は彼らのスコープが違うことです。 submitを押すと、コールバックを呼び出して、配列を解除していないコントローラから配列をクリアするように要求しています。

例を示します。 最初のリストと最後のリストは同じですが、別々に参照されています。 1つはvm.usersと直接バインドされ、最後の1つに$parent.vmが含まれ、親スコープを使用していることがわかります。

(function() { 
 
    
 
    var app = angular.module('app', []); 
 

 
    app.controller('MainController', ['$http', MainController]); 
 
    
 
    function MainController($http) { 
 
    
 
    var self = this; 
 
    
 
    self.users = ['MNO', 'PQR', 'STU', 'VWX']; 
 
    
 
    self.clearUsers = function() { self.users = []; }; 
 
    } 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="MainController as vm"> 
 
    //Users from parent scope 
 
    <div ng-repeat="user in vm.users"> {{user}} </div> 
 
    <button ng-click="vm.clearUsers()"> Clear </button><br/> 
 
    //Users from this scope 
 
    <div ng-controller="MainController as mc"> 
 
    <div ng-repeat="user in mc.users"> {{user}} </div> 
 
    <button ng-click="mc.clearUsers()">Clear</button> 
 
    </div> 
 
    //Clear users from parent scope 
 
    <div ng-controller="MainController as mc2"> 
 
    <div ng-repeat="user in $parent.vm.users"> {{user}} </div> 
 
    <button ng-click="$parent.vm.clearUsers()">Clear</button> 
 
    </div> 
 
    
 
</div>

Answer 2

が

$scope.users = []; 
if(!$scope.$$phase) { 
    $scope.$apply(); 
} 

を試してみてください

$ scope内のすべてを再確認するために基本的に角度を指定して変更を適用します。