Обмен данными между контроллерами - Angularjs

У меня проблема при попытке совместного использования данных между двумя контроллерами. Вот мой код:Обмен данными между контроллерами - Angularjs

<html> 
 
<head> 
 
    <title>My Angular App</title> 
 
</head> 
 
<body ng-app="MyTest"> 
 

 
<div ng-controller="ViewController as vmView"> 
 
    <ul> 
 
     <li ng-repeat="singleItem in vmView.allData"> 
 
      {{ singleItem }} 
 
     </li> 
 
    </ul> 
 

 
    {{ vmView.checkItOut }} 
 

 
    <input type="button" ng-click="vmView.justClick()" /> 
 
</div> 
 

 
<div ng-controller="AddController as vmAdd"> 
 
    <form ng-submit="vmAdd.saveChanges()"> 
 
     <input type="text" ng-model="vmAdd.inputText" /> 
 
     <input type="submit" /> 
 
    </form> 
 
</div> 
 

 
<script src="angular.js"></script> 
 
<script src="app.js"></script> 
 
<script type="application/javascript"> 
 
    angular.module('MyTest') 
 
      .factory('shareDataFactory', function($http, $q) { 
 
       var data = {}; 
 

 
       data.list = $q.defer(); 
 

 
       data.getAllData = function() { 
 
        $http.get('http://www.w3schools.com/angular/customers.php') 
 
          .then(function(response) { 
 
           data.list = $q.resolve(response.data.records); 
 
          }); 
 

 
        return data.list.promise; 
 
       }; 
 

 
       data.addData = function(newData) { 
 
        data.list.push(newData); 
 
       }; 
 

 
       return data; 
 
      }); 
 

 
    angular.module('MyTest') 
 
      .controller('ViewController', function ViewController(shareDataFactory) { 
 
       var vm = this; 
 

 
       vm.allData = shareDataFactory.getAllData(); 
 

 
       vm.checkItOut = "Just checking .."; 
 

 
       vm.justClick = function() { 
 
        console.log(vm.allData); 
 
       } 
 
      }); 
 

 
    angular.module('MyTest') 
 
      .controller('AddController', function AddController(shareDataFactory) { 
 
       var vm = this; 
 

 
       vm.inputText = "Hello"; 
 

 
       vm.saveChanges = function() { 
 
        shareDataFactory.addData(vm.inputText); 
 

 
        // Clear the data 
 
        vm.inputText = ""; 
 
       }; 
 
      }); 
 
</script> 
 
</body> 
 
</html>

vm.allData его просто не обновляя Affter запроса возвращаются с сервера. Я пытался решить это в течение длительного времени, но безуспешно. спасибо вам всем, и есть прекрасная неделя, Rotem

источник

2015-12-22 R.Bar

@Igor: это ** в ** общий. Услуга AngularJS - одноэлементный. Таким образом, одна и та же услуга вводится в обоих контроллерах. –

@JBNizet - спасибо за это, я удалил свой комментарий. – Igor

Ваш код не имеет особого смысла:

data.list = $q.defer();

Так, Data.List является отложенный объект. Но позже

data.list = $q.resolve(response.data.records);

Ах, это не отложила больше: он заменяется на разрешаемый обещание, которое не связано с обещанием, возвращенного getAllData(). Но позже

data.list.push(newData);

Ах, этот код считает, что это массив, а не обещание, не отложенное.

Это не может быть прав. Если вы хотите, чтобы иметь возможность нажать, это должен быть массив. Если вы хотите заполнить массив, когда обещание http разрешено, то нажмите на этот арай

Также неясно, что должна делать служба: он получает данные от службы HTTP, но не передает новые значения этому HTTP-сервис. Таким образом, каждый раз, когда вы вызываете getAllData(), вы теряете добавленные значения.

В любом случае:

  var list = []; 
      var getAllData = function() { 
       $http.get('http://www.w3schools.com/angular/customers.php') 
         .then(function(response) { 
          // clear the array 
          list.splice(0, list.length); 
          // copy every record to the array 
          response.data.records.forEach(function(record) { 
           list.push(record); 
          }); 
         }); 

       return list; 
      }; 

      var addData = function(newData) { 
       list.push(newData); 
      }; 

      return { 
       getAllData: getAllData, 
       addData: addData 
      };

источник

2015-12-22 18:19:40

Спасибо, что сейчас его работа! Я знаю, что он не сохранялся прямо сейчас на сервере, это было просто проверка связи между двумя контроллерами –

Здесь вы можете найти working version кода. Когда данные загружаются, вы заменяете связанный список на новый, поэтому изменения больше не отражаются.

Html

<div ng-controller="ViewController as vmView"> 
    <ul> 
     <li ng-repeat="singleItem in vmView.allData"> 
      {{ singleItem }} 
     </li> 
    </ul> 

    {{ vmView.checkItOut }} 

    <input type="button" ng-click="vmView.justClick()" /> 
</div> 

<div ng-controller="AddController as vmAdd"> 
    <form ng-submit="vmAdd.saveChanges()"> 
     <input type="text" ng-model="vmAdd.inputText" /> 
     <input type="submit" /> 
    </form> 
</div> 

</body>

Javascript

var module = angular.module('MyTest', []); 

module.service('shareDataFactory', function($http, $q) { 
    var data = { 
    list: [] 
    }; 
    $http.get('http://www.w3schools.com/angular/customers.php') 
    .then(function(response) { 
     Array.prototype.push.apply(data.list, response.data.records); 
    }); 


    return { 
    getData: function() { 
     return data; 
    }, 
    addData: function(newData) { 
     data.list.push(newData); 
    } 

    }; 
}); 


module.controller('ViewController', function ViewController($scope, shareDataFactory) { 


    $scope.allData = shareDataFactory.getData().list; 
    $scope.checkItOut = "Just checking .."; 

    $scope.justClick = function() { 
    console.log($scope.allData); 
    } 
}); 

module.controller('AddController', function AddController($scope, shareDataFactory) { 


    $scope.inputText = "Hello"; 

    $scope.saveChanges = function() { 
    shareDataFactory.addData($scope.inputText); 

    // Clear the data 
    $scope.inputText = ""; 
    }; 
});

источник

2015-12-22 19:21:12

Обмен данными между контроллерами - Angularjs

ответ

Смежные вопросы