AngularJS service Bind variable de tableau contrôleur de portée

J'ai été en mesure de lier un objet primitif de données à partir d'un service à une étendue variable à partir d'un contrôleur, mais je vais avoir du mal à faire la même chose avec une variable de tableau de service.

service.js

myServices.factory('MyService', ['$http', function($http) {
var mySets = [];

  return {
  initMySets: function(userId, success, error) {
    $http.get(apiUrl + "/controller/getmysets", {params:{id:userId}}).success(function (data) {
      mySets = [];
      angular.copy(data, mySets);
    }).error(error);
  },

  getMySets: mySets


}]);

controllers.js

myControllers.controller('MenuController', ['$scope', 'UserService', 'MyService',
  function ($scope, UserService, MyService) {

  $scope.user = UserService.user;
  $scope.mySets = MyService.getMySets;

  $scope.logout = function() {
    UserService.logout();
  }
}]);

index.html

<nav id="app-menu"  ng-controller="MenuController" ng-class="{hide:!global.showMenu,slide:global.showMenu}">
  <div id="menu-head">
    <h4>{{user.Email}}</h4>
  </div>
  <ul>
    <div ng-switch on="user.UserId != null">
      <li ng-switch-when="true"><a href="#/main" ng-click="toggleMenu();logout();">Logout</a></li>
      <li ng-switch-when="false"><a href="#/login" ng-click="toggleMenu()">Login</a></li>
      <li ng-switch-when="true" ng-repeat="mySet in mySets">
        <a href="#/mySet /{{mySet.MySetId}}" ng-click="toggleMenu()">{{mySet.Label}}</a>
      </li>
    </div>
  </ul>
</nav>

J'ai une connexion de fonction qui s'appelle initMySets sur la réussite de passage dans le userId et je sais que le mySets variable dans le service se remplis correctement sur l'angle de copie, mais je ne suis pas la mise à jour réelle dans le contrôleur.

Le $scope.la variable est mise à jour à partir de la UserService, mais le mySet ng-repeat n'est pas l'affichage de la liste de service.

Les données retournées à partir de l'adresse http.obtenez est un IEnumerable collection d'objets complexes à partir de mon MVC, Web API contrôleur. Je ne sais pas si cela fait une différence.

Jetez un oeil à $apply() méthode: docs.angularjs.org/api/ng.$rootScope.Portée
alors que $apply ne forcez la mise à jour et peut être utile à certains, les services eux-mêmes n'ont pas étendues et l'appel de cette méthode sur le $rootScope peut être coûteux.

OriginalL'auteur joshua.johnson.814 | 2014-01-07

  1. 16

    De liaison ne fonctionne pas parce que votre tableau (dans votre contrôleur) ne changent jamais.

    Lorsque votre initSets succès fonction est appelée, votre interne de la matrice de points sur un nouveau tableau, mais votre portée variable encore des points à votre vide initial tableau.

    Au lieu de créer un nouveau tableau, d'effacer votre table initiale et pousser de nouveaux éléments à la table initiale:

    Remplacer:

    mySets = [];
angular.copy(data, mySets);

    Par:

    mySets.length = 0; //Clear initial array
mySets.push.apply(mySets, data); //Push data to initial array

    Voir ce violon (je simule un rappel asynchrone à l'aide de $timeout) : http://jsfiddle.net/UJTPD

    Merci, je vais voir les données dans mon contrôleur de portée maintenant, si j'ai rendu {{mySets[0].Label}} sur la vue, cependant la ng-repeat boucle dans mySets n'est pas mise à jour. Dois-je faire autre chose pour "redémarrer" en boucle?
    Ok il a travaillé quand j'ai pris la ng-commutateur-when="true" sur le ng-repeat. Aucune idée de pourquoi cela posait un problème?
    C'est une bouée de sauvetage!! J'ai eu du mal pendant des heures pour résoudre un problème similaire. Merci à joshua.johnson.814 pour demander et merci @Mickael pour la réponse
    sweet geesuz, je n'ai aucune idée wtf que vous faites et pourquoi. Tout ce que je sais, c'est que cela m'a sauvé la vie. wow

    OriginalL'auteur Mickael

  2. 0

    Au lieu de l'affectation d'une nouvelle liste ( mySets = [] ), puis en appelant angular.copy, vous devez juste être l'appel de angular.copy;

    Comme cela;

    angular.copy(data, mySets);

    OriginalL'auteur Blowsie