Question

我能够让一个基本组件工作，但是试图通过$ http（users.get（））加载一些数据，这会返回一个promise（数据确实显示在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 }}

模板显示＆＃39;这是miketest＆＃39;但它不显示＆＃39;这是迈克2＆＃39;

任何线索都表示赞赏。谢谢。麦克

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

如何在（1.5）角度分量中加载数据？

1 个答案: