Question

我正在尝试使用JSON文件中的数据预先填充选择列表。

控制器的

this.langs = [];
var promise = $lcidFactory.getLCIDS();
promise.then(
    function(payload){
        this.langs = payload.data;
        console.log(payload.data);
    },
    function(error){
        alert("[Error] "+error);
    }
);

当我使用检查器查看控制台时，会显示数据。但是，以下代码生成一个空的JSON {}。

HTML 的

<template-editor-form model="cpCtrl.data">
    ...
    <pre>{{ cpCtrl.langs | json }}</pre>
    ...
</template-editor-form>

如果我将控制器第1行中的this.langs = []设置为this.langs = ["one"]，模板会正确反映更改，["langs": ["one"]]

修改的这个问题与How does the "this" keyword work?类似，但是这个问题以简洁的方式解决了在AngularJS 的上下文中使用this的一个常见缺陷。

Answer 1

嗯，我猜你的问题是你的函数中的“this”与函数外的“this”不一样。您可以将“在此外部”设置为变量，因此即使在回调函数中也可以使用该变量来访问您的lang。

var self = this;
this.langs = [];
var promise = $lcidFactory.getLCIDS();
promise.then(
    function(payload){
        self.langs = payload.data;
        console.log(payload.data);
    },
    function(error){
        alert("[Error] "+error);
    }
);

Answer 2

另一个解决方案是将上下文绑定到提供有界函数的函数。

this.langs = [];
var promise = $lcidFactory.getLCIDS();
promise.then(
    function(payload){
        this.langs = payload.data;
        console.log(payload.data);
    }.bind(this), 
    function(error){
        alert("[Error] "+error);
    }
);

Answer 3

this在松散模式下为window，在回调函数中为严格模式下为undefined。这可以通过

修复

使用ES5 bind （angular.bind可能会用于旧版浏览器）

promise.then(
    function(payload){
        this.langs = payload.data;
    }.bind(this),
    ...

使用ES6箭头功能

promise.then(
    (payload) => {
        this.langs = payload.data;
    },
    ...

将this分配给父函数范围中的另一个变量

var _this = this;

promise.then(
    function(payload){
        _this.langs = payload.data;
    },
    ...

Answer 4

您应该将外部this存储在var that = this之类的变量中，并在解析处理程序中使用that.langs = payload.data。

希望它有所帮助！

Answer 5

我建议，javascript中的this有点奇怪（或与其他语言不同）和范围相关 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

代码：

this.langs = [];

var base = this;

var promise = $lcidFactory.getLCIDS();
promise.then(
    function(payload){
        base.langs = payload.data;
        console.log(payload.data);
    },
    function(error){
        alert("[Error] "+error);
    }
);

AngularJS承诺不正确设置“this”

5 个答案: