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

Question

I'm having troubles updating a list. At first I fill my list by fetching information from a $http.get request. Later I enter something in a text box and I try to update the list with the response of the $http.post request.

I do get a response and I have the data. When I overwrite the variable that is in $scope the list doesn't update.

My code looks like this:

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

The UserService is a factory that has the two functions, one for the GET request and one for the POST request. It looks like this:

 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; }); } }; }); 

I read something about $scope being out of scope and try to solve it by using $scope.apply() or $scope.$digest but I get errors when I try that. Also I tried adding tracking in the html but that also doesn't seem to work.

As you can see I also tried to hardcode update the list, that also doesn't seem to work.

I'm very new to Angular and this is keeping me busy for days now. I hope someone can help me. Any suggestions to my code are welcome as well ;) . Thanks!

Answer 1

Here is a plunker of your code working with just one controller. I modified it a little since I don't have your API endpoints, but the returned object is a promise and hence data gets displayed correctly.

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

The reason your code doesn't work as you intend is because you have declared the controller twice in the HTML.

From the angular docs:

"When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be created and made available as an injectable parameter to the Controller's constructor function as $scope."

Meaning:

When you declare another ng-controller, it has its own child scope, it does not share scope with any other controller. And your items are declared on only one scope.

Relevant code:

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;
            });*/
        } 
    }; 
});