Angular - изменение переменных контроллера в вызове $ http

Question

Angular - изменение переменных контроллера в вызове $ http

0

Я пытаюсь изменить переменные контроллера из вызова в $ http (который получает данные от API). Эти переменные контроллера связаны с моей моделью ng.

Однако он не работает - ничего не отображается!

angular
    .module('myApp')
    .controller('contactController', ['$scope', '$http', ContactController]);

function ContactController($scope, $http) {

    this.firstName = '';
    this.lastName = '';

    $http.get('../server/getdata').success(function(data) {
        // I would like to set the firstName and lastName variables 
        // from the above parent scope into here. Is this possible? 
        this.firstName = data.firstName;
        this.lastName = data.lastName;
    });
}

Любые мысли здесь?

Ricky 21 сен. 2015, в 07:22

Источник

Теги:

javascript

angularjs

3 ответа

Ещё вопросы

Phil · Answer 1 · 2015-09-21T02-59-00.000Z

Проблема не в this в $http обратного вызова больше не ваш контроллер.

Назначьте this значение переменной с областью, например

var ctrl = this;

ctrl.firstName = '';
ctrl.lastName = '';

// keep in mind the "success" and "error" methods on the $http promise
// have been deprecated. Use the standard "then" method instead.
$http.get('../server/getdata').then(function(response) {
    ctrl.firstName = response.data.firstName;
    ctrl.lastName = response.data.lastName;
});

См. Https://docs.angularjs.org/api/ng/service/$http#deprecation-notice относительно устаревших методов $http обратного вызова.

Спасибо @Phil. Это сработало; также спасибо за советы, чтобы начать использовать «тогда» вместо «успеха»!
@ Рики, некоторые чтения доступны здесь ~ toddmotto.com/digging-into-angulars-controller-as-syntax

JC Ford · Answer 2 · 2015-09-21T01-54-00.000Z

Просто нужно сохранить значение this в момент создания захвата, назначив его другой переменной, такой как self

angular
    .module('myApp')
    .controller('contactController', ['$scope', '$http', ContactController]);

function ContactController($scope, $http) {

    var self = this;

    this.firstName = '';
    this.lastName = '';

    $http.get('../server/getdata').success(function(data) {
        // I would like to set the firstName and lastName variables 
        // from the above parent scope into here. Is this possible? 
        self.firstName = data.firstName;
        self.lastName = data.lastName;
    });
}

Спасибо @JC! Это похоже на ответ Фила. Однако можете ли вы прокомментировать, почему (если) эти подходы предпочтительнее использования $ scope? Я видел $ scope, используемый в онлайн-примерах, в то время как я искал способы заставить это работать
Использование $scope - это просто еще один способ сохранить ссылку на контроллер. Настоящая проблема - переменная this . Он ссылается на контроллер, когда создается экземпляр контроллера, но он изменяется на другой объект, когда выполняется обратный вызов $http поэтому вам нужен другой способ обращения к контроллеру в этом обратном вызове. Если контроллер присоединен к $scope например, как член с именем ctrl вы можете просто ссылаться на него следующим образом: $scope.ctrl.firstName . Однако, на мой взгляд, это менее понятно, чем явное сохранение ссылки в закрытии.

Sarjan Desai · Answer 3 · 2015-09-21T03-35-00.000Z

Измените это значение на $ scope в функции успеха, чтобы ваш код был как

$scope.firstName = data.firstName;
$scope.lastName = data.lastName;

эта функция внутреннего успеха имеет область действия не глобальную, поэтому она не привязывается к контроллеру.

Предположительно OP использует выражение «controller-as» и, как таковое, предполагает, что они используют $scope неприменимо.
@Phil: я видел несколько примеров онлайн использования этого объекта "$ scope" способом, описанным Сарджаном, здесь. В чем разница между использованием этого $ scope и использованием var self = this, например? (и затем ссылка на «я» во внутренней функции)