如何在（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); 
    });