Comment charger des données dans un composant angulaire (1.5)?

Question

Je suis capable de faire fonctionner un composant de base, mais en essayant de charger des données via $ http (users.get()) qui renvoie une promesse (les données apparaissent dans console.log (this.data). les données ne fait pas au modèle de composant. Pourquoi?

.component('mrcUserInfo', { 
bindings: { 
    email: '<', 
    first_name: '<', 
    last_name: '<' 
}, 
templateUrl: 'components/userInfo.html', 
controller: function(users) { 
    var scope = {}; 
    scope.thisId = 1; 
    this.miketest = 'this is miketest'; 

    users.get(scope) // basically does a $http()... 
    .then(function(data) { 
     this.data = data.data; 
     this.email = data.email; 
     this.miketest = 'this is mike 2'; 

     console.log('user?'); 
     console.log(this.data); 
    }); 
} 

Et mon modèle a cette

this is userInfo.html: 
{{ $ctrl.miketest }} 

l'écran modèle «c'est miketest », mais il n'affiche «c'est mike 2 '

Des indices appréciés Merci Mike

Answer 1

Soyez prudent lorsque vous utilisez this, en particulier dans le code asynchrone. Dans votre cas, this sera window objet dans votre rappel, donc vous êtes en train de définir miketest variable sur la fenêtre plutôt que le contrôleur.

Vous pouvez faire:

var ctrl = this; 
users.get(scope) // basically does a $http()... 
    .then(function(data) { 
    ctrl.data = data.data; 
    ctrl.email = data.email; 
    ctrl.miketest = 'this is mike 2'; 

    console.log('user?'); 
    console.log(ctrl.data); 
    }); 

Ou lier explicitement this:

users.get(scope) // basically does a $http()... 
    .then(function(data) { 
    this.data = data.data; 
    this.email = data.email; 
    this.miketest = 'this is mike 2'; 

    console.log('user?'); 
    console.log(this.data); 
    }.bind(this)); 

De plus, si vous utilisez quelque chose comme BabelJS et sont en mesure d'utiliser les fonctions JavaScript modernes, vous pouvez utiliser les fonctions de double flèche pour lier this à la portée lexicale:

users.get(scope) // basically does a $http()... 
    .then((data) => { 
    this.data = data.data; 
    this.email = data.email; 
    this.miketest = 'this is mike 2'; 

    console.log('user?'); 
    console.log(this.data); 
    });