Question

我在更新列表时遇到了麻烦。首先，我通过从$ http.get请求中获取信息来填充我的列表。稍后我在文本框中输入内容，然后尝试使用$ http.post请求的响应更新列表。

我得到回复，我有数据。当我覆盖$ scope中的变量时，列表不会更新。

我的代码如下所示：

'use strict';

angular.module('myApp.friends', ['ngRoute'])

    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/friends', {
            templateUrl: 'friends/friends.html',
            controller: 'FriendsCtrl'
        });
    }])

    .controller('FriendsCtrl', function ($scope, $http, $timeout, UserService) {
        $scope.items = [];

        $scope.formSearchData = {};

        UserService.getAll().then(function(data) {
            var remoteItems = data;

            for (var i = 0; i < remoteItems.length; i++) {
                var object = {};
                object.name = remoteItems[i].name;
                object.id = remoteItems[i]._id;
                $scope.items.push(object);
            }
        });

        $scope.itemClick = function(value) {
            console.dir(value);
        };

        $scope.submitForm = function() {
            //debugger;
            $scope.items[0].name = "John D";
            UserService.getSearchResult($scope.formSearchData).then(function(data) {
                getSearchResult(data);
            });
        };

        function getSearchResult(data) {
            var remoteItems = data.records;
            $scope.items = [];
            for (var i = 0; i < remoteItems.length; i++) {
                var object = {};
                object.name = remoteItems[i].name;
                object.id = remoteItems[i].id;
                $scope.items.push(object);
            }
        }
    })

    .controller('navigationcontroller', function ($scope, $location) {
        $scope.isActive = function(viewLocation) {
            return viewLocation = $location.path();
        }
    });

<div class="panel panel-title">
    <div class="panel-body">
        <div class="friend-search" ng-controller="FriendsCtrl">
            <form ng-submit="submitForm()">
                <input type="search" name="search" placeholder="Zoek vrienden" class="form-control" ng-model="formSearchData.search">
            </form>
        </div>
    </div>
</div>

<div class="panel panel-title">
    <div class="panel-default">
        <div class="scrollable-content" ui-scroll-bottom='bottomReached()' ng-controller="FriendsCtrl">
            <div class="list-group">
                <a ng-repeat="item in items" ng-model="items" class="list-group-item" ng-click="itemClick(item)">
                    {{ item.name }}
                </a>
            </div>
        </div>
    </div>
</div>

UserService是一个具有两个功能的工厂，一个用于GET请求，另一个用于POST请求。它看起来像这样：

angular.module('myApp').factory('UserService', function($http) {
    return {
        getAll: function() {
            return $http.get('http://localhost:3030/user/all').then(function(response) {
                return response.data;
            });
        },

        getSearchResult: function(query) {
            return $http.post('http://localhost:3030/user/search', query, { 'Content-Type': 'application/json' }).then(function(response) {
                return response.data;
            });
        }
    };
});

我读了一些关于$ scope超出范围的内容，并试图通过使用$ scope.apply（）或$ scope。$ digest来解决它，但是当我尝试时我得到错误。我也尝试在html中添加跟踪，但这似乎也不起作用。

正如你所看到的，我也试图硬编码更新列表，这似乎也不起作用。

我对Angular很新，这让我忙了几天。我希望有一个人可以帮助我。对我的代码的任何建议也是受欢迎的;）。谢谢！

Answer 1

这是一个只使用一个控制器的代码的plunker。我修改了一点，因为我没有你的API端点，但返回的对象是一个承诺，因此数据显示正确。

http://plnkr.co/edit/iEWBm6QE2pmFqbsU6EiB?p=preview

您的代码无法按预期工作的原因是因为您已在HTML中声明了控制器两次。

来自角度文档：

＆＃34;当Controller通过ng-controller指令附加到DOM时，Angular将使用指定的Controller的构造函数实例化一个新的Controller对象。将创建一个新的子作用域，并将其作为$ scope的构造函数的可注入参数提供。＆＃34;

<强>含义：

当您声明另一个ng-controller时，它有自己的子范围，它不与任何其他控制器共享范围。并且您的项目仅在一个范围内声明。

相关代码：

var app = angular.module("myApp", []);

app.controller('myCtrl', ['$scope', 'UserService', function($scope, UserService){

  $scope.items = [];

  $scope.formSearchData = {};

  UserService.getAll().then(function(data) {
      $scope.saved = data;

      for (var i = 0; i < $scope.saved.length; i++) {
          var object = {};
          object.name = $scope.saved[i].name;
          object.id = $scope.saved[i]._id;
          $scope.items.push(object);
      }
  });

  $scope.itemClick = function(value) {
      console.dir(value);
  };

  $scope.submitForm = function() {
      UserService.getSearchResult($scope.formSearchData).then(function(data) {
          console.log( data );
          if( data ){
            $scope.items = data;
          } else {
            $scope.data = $scope.saved;
          }

      });
  };



}]); 

app.factory('UserService', function($http, $q) {
    return {
        getAll: function() {
          return $q(function(resolve, reject) {
            resolve(
              [{
                name: 'test'
              }, {
                name: 'test2'
              }]
            );
          });
            /*return $http.get('http://localhost:3030/user/all').then(function(response) {
                return response.data;
            });*/
        },

        getSearchResult: function(query) {
          return $q(function(resolve, reject) {
            resolve( [{
              name: 'test'
            }]);
          });
          /*  return $http.post('http://localhost:3030/user/search', query, { 'Content-Type': 'application/json' }).then(function(response) {
                return response.data;
            });*/
        } 
    }; 
});

双向绑定似乎不起作用。列表不会自动更新

1 个答案: