Как загрузить данные в (1.5) угловом компоненте?

Question

Я могу получить базовый компонент, работающий, но пытающийся загрузить некоторые данные через $ http (users.get()), который возвращает обещание (данные отображаются в console.log (this.data). данные не делает его компонентов шаблона. Почему?

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

И мой шаблон имеет этот

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

в шаблон отображает «это miketest», но он не отображает «это микрофон 2 '

Любые подсказки, оцененные. Спасибо. Mike

Answer 1

Будьте осторожны при использовании this, особенно в асинхронном коде. В вашем конкретном случае, this будет window объект в вашем обратном вызове, поэтому вы на самом деле устанавливаете переменную miketest на окне, а не на контроллер.

Вы можете сделать:

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

или явно связать 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)); 

Кроме того, если вы используете что-то вроде BabelJS и способны использовать современные функции JavaScript, вы можете использовать функции двойной стрелки для привязки this к лексической сфере:

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