AngularJS обещают не устанавливать "это" должным образом

angularjs json

61 просмотра

5 ответа

1045 Репутация автора

Я пытаюсь предварительно заполнить список выбора данными из файла 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>

Если я установил this.langs = []в строке 1 контроллера, this.langs = ["one"]то шаблон правильно отражает изменения, так как["langs": ["one"]]

РЕДАКТИРОВАТЬ Этот вопрос похож на Как работает ключевое слово "this"? Однако, этот вопрос решает одну из распространенных ошибок использования thisв контексте AngularJS , в сжатой форме.

Автор: Glenn Dayton Источник Размещён: 18.07.2016 02:57

Ответы (5)


0 плюса

344 Репутация автора

Вы должны хранить внешнюю thisпеременную как var that = thisвнутри, так и внутри использования обработчика разрешения that.langs = payload.data.

Надеюсь, это поможет !

Автор: Rathma Размещён: 18.07.2016 03:01

4 плюса

715 Репутация автора

Решение

Ну, я полагаю, ваша проблема в том, что «это» в вашей функции не является тем же «этим» вне функции. Вы можете установить переменную "outside this", чтобы вы могли использовать эту переменную для доступа к своим языкам даже в функции обратного вызова.

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);
    }
);
Автор: Daniel Z. Размещён: 18.07.2016 03:02

0 плюса

412 Репутация автора

В thisjavascript немного странный (или отличается от других языков) и связанных с областью, я предлагаю 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);
    }
);
Автор: hayatoShingu Размещён: 18.07.2016 03:05

3 плюса

29815 Репутация автора

Другим решением может быть привязка контекста к функции, которая предоставляет ограниченную функцию.

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);
    }
);
Автор: Hamlet Hakobyan Размещён: 18.07.2016 03:06

2 плюса

92859 Репутация автора

thisнаходится windowв свободном режиме или undefinedв строгом режиме в функциях обратного вызова. Это может быть исправлено

используя ES5bind ( 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;
    },
    ...
Автор: Estus Flask Размещён: 18.07.2016 03:09
Вопросы из категории :
32x32