javascript - $http 中的 Angular 1 数据绑定(bind) promise 不起作用

Question

我有一个页面，其中存在 add new user按钮显示用于提交表单的 Angular 模板。表单提交方法绑定(bind)到submit方法User Controller 。表单将提交到服务器并获取响应，但代码 $scope.users = []不起作用。我观察到console.log($scope.users)打印已列出的用户，但我希望由于 $scope.users = [] 将它们从 View 中删除行但这种情况不会发生。看来这里的数据绑定(bind)有问题。

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

这里的问题是您有两个 Controller ，从而改变了范围。 您有一个父 Controller ，即 UserController as uc 和第二个 Controller ，没有别名。问题是它们的范围不同。 当您点击提交时，您要求回调从非别名 Controller 中清除数组。

这是一个例子。 第一个列表和最后一个列表相同，但引用方式不同。一个直接与 vm.users 绑定(bind)，最后一个包含 $parent.vm，告诉 Angular 它正在使用它的父作用域。

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