Хобрук: Ваш путь к мастерству в программировании

ngTagsInput не заполняется из углового $ http

Я полный новичок в angularjs. Так что, надеюсь, я немного на правильном пути.

У меня есть контекст данных, настроенный как

(function () {
'use strict';

var serviceId = 'datacontext';
angular.module('app').factory(serviceId, ['common', '$http', datacontext]);

function datacontext(common, $http) {
    var $q = common.$q;

    var service = {
        getCustomerGroups: getCustomerGroups
    };

    return service;


    function getCustomerGroups() {
        var groups = [];

        $http({ method: 'GET', url: '/api/getgroups' }).
                success(function (data, status, headers, config) {
                        console.log(status);
                        console.log(headers);
                        console.log(data);
                        groups = data;
                        return $q.when(groups);

            }).
error(function (data, status, headers, config) {
    console.log(data);
    // called asynchronously if an error occurs
    // or server returns response with an error status.
});
          return $q.when(groups);
    }
}
})();

На мой взгляд, я использую ngTagsInput

                        <tags-input ng-model="groups"
                                display-property="GroupName"
                                placeholder="Add Customer Group"
                                enableeditinglasttag="false"
                                class="ui-tags-input"
                                replace-spaces-with-dashes="false">
                    </tags-input>

И, наконец, мой контроллер

(function () {
'use strict';
var controllerId = 'customers';
angular.module('app').controller(controllerId, ['common','$scope','$http','datacontext', customers]);

function customers(common,$scope,$http,datacontext) {

    var vm = this;
    vm.title = 'Customers';
    $scope.groups = [];


    function getGroups() {
        return datacontext.getCustomerGroups().then(function (data) {
            return $scope.groups = data;
        });
    }

    activate();

    function activate() {
        var promises = [getGroups()];
        common.activateController(promises, controllerId)
            .then(function() {

            }
       );
    }



}
})();

Я не получаю никаких ошибок, и я вижу, что правильные данные возвращаются в методе успеха $http. Однако тег не заполняется. Это потому, что тег вызывает источник данных до завершения $http?


  • Является ли первый фрагмент кода вашим фактическим кодом? Это не кажется правильным. 23.06.2014

Ответы:


1

Я не уверен, как работает $q.when, но он возвращает обещание, но не разрешает его. Вы должны использовать отложенный API.

Итак, в начале набора

var defer = common.$q.defer();

а позже успешно выполнить defer.resolve.

 success(function (data, status, headers, config) {
                        console.log(status);
                        console.log(headers);
                        console.log(data);
                        groups = data;
                        defer.resolve(data);

и посмотрите, работает ли он.

22.06.2014
  • Привет, Чандермани, я добавил переменную отсрочки в свою функцию getCustomerGroups() {} Должен ли я все еще пытаться вернуть массив, например return $q.when(groups); 22.06.2014
  • НЕТ. Это функция обратного вызова, а не ваша функция getCustomerGroups. 22.06.2014
  • Новые материалы

    Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
    каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..

    Как настроить Selenium в проекте Angular
    Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..

    Аргументы прогрессивного улучшения почти всегда упускают суть
    В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..

    Введение в Джанго Фреймворк
    Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..

    Настольный ПК как «одно кольцо, чтобы править всеми» домашних компьютеров
    Вид после 9 месяцев использования С настольных компьютеров все началось, но в какой-то момент они стали «серверами», и мы все перешли на ноутбуки. В прошлом году я столкнулся с идеей настольных..

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

    стройный-i18следующий
    Представляем стройную оболочку для i18next. Эта библиотека, основанная на i18next, заключает экземпляр i18next в хранилище svelte и отслеживает события i18next, такие как languageChanged,..