Как я могу получить доступ к массиву $ scope, который определен в .then () в Angular JS?

0

Вот мой код контроллера

 $http.get(config.url+'/api/employees-suggestion/??token=' + currentUser.token + '&filterEmployee='+ "10000191")
.then(function(response) {
    console.log(response);
       $scope.id_list = [
         {employeeName: 'Hello'},
       ];
       console.log("id_list="+$scope.id_list);
   }, function(response) {
       }
 )

Я хочу получить значение "$ scope.id_list" и использовать его в другом внешнем js файле (который является настраиваемой директивой для ионно-автозаполнения). Вот директивный код,

    angular.module('autocomplete.directive', [])

 .directive('ionicAutocomplete',
    function ($ionicPopover) {
      var popoverTemplate = 
       '<ion-popover-view style="margin-top:5px">' + 
         '<ion-content>' +
             '<div class="list">' +
                '<a href="#/tab/badgeboard" class="item" ng-repeat="item in id_list | filter:inputSearch" ng-click="selectItem(item)">{{item.employeeName}}</a>' +
             '</div>' +
         '</ion-content>' +
     '</ion-popover-view>';
    return {
        restrict: 'A',
        scope: {
            params: '=ionicAutocomplete',
            inputSearch: '=ngModel'
        },
        link: function ($scope, $element, $attrs) {
            var popoverShown = false;
            var popover = null;
            $scope.id_list = $scope.params.id_list;

            //Add autocorrect="off" so the 'change' event is detected when user tap the keyboard
            $element.attr('autocorrect', 'off');


            popover = $ionicPopover.fromTemplate(popoverTemplate, {
                scope: $scope
            });
            $element.on('focus', function (e) {
                if (!popoverShown) {
                    popover.show(e);
                }
            });

            $scope.selectItem = function (item) {
                $element.val(item.display);
                popover.hide();
                $scope.params.onSelect(item);
            };
        }
    };
}

);

{{item.employeeName}} не печатает ничего в pop-over, поскольку 'id_list' пуст (что неверно).

если я поставлю следующий код

$scope.id_list = [
    {employeeName: 'Hello'},
     ];

вне.then() все работает правильно {{item.employeeName}} печатает имя employee в pop-over

Это код в html (view), который является полем ввода и показывает всплывающее окно

        <input type="text" ionic-autocomplete="{id_list: id_list, onSelect:onSelect}"placeholder="Search ?" ng-model="search">

Я попробовал $ rootScope, но не смог. Что я делаю не так? Как я могу это решить?

  • 0
    Тогда внутри находится ваш console.log (функция (ответ) печатается?
  • 0
    вторая функция обратного вызова http.get предназначена для ошибок, вы проверили console.log в этой функции
Показать ещё 8 комментариев
Теги:
ionic-framework

4 ответа

0
Лучший ответ

Альтернативный способ доступа к $ scope.id_list в вашем коде, вы можете попробовать это

var id_list=[];

 $http.get(config.url+'/api/employees-suggestion/??token=' + currentUser.token + '&filterEmployee='+ "10000191")
.then(function(response) {
    console.log(response);
       id_list = {employeeName: 'Hello'};
      id_list.push({id_list: id_list});
      console.log("id_list="+id_list);
   }, function(response) {
       }
 )

здесь $scope.id_list.push({id_list: id_list}); будет отображаться в пользовательском интерфейсе.

 <input type="text" ionic-autocomplete="{id_list: id_list, onSelect:onSelect}"placeholder="Search ?" ng-model="search">

и ваш onSelect

$scope.onSelect = function (item) {
        console.log('item', item);

    };

это должно работать нормально

Поделиться
2

Немного теории:

То, $http.get возвращает $http.get называется обещанием. Он асинхронно разрешен (когда он успешный) или отклоняется (когда что-то идет не так). Если вы ссылаетесь на документацию по угловым обещаниям, then() принимает 2 функции, одну для разрешения и одну для отклонения.

Обычно $http звонки должны проходить внутри угловых сервисов ("сервис" или "фабрика", эти два очень похожи). Подобную услугу можно вводить в любой контроллер или директив и повторно использовать.

В твоем случае:

Существует хорошая вероятность того, что ваше обещание будет отвергнуто, поэтому выполняемая функция - это вторая функция, которую вы передаете then(), и она в настоящее время пуста.

Сначала проверьте это, и дайте мне знать.

Поделиться
0

Добавьте $scope.$apply() после того, как вы установили результат в обратном вызове, он позволит угловым видеть изменения, сделанные вне его нормального поведения

Поделиться
  • 1
    Обратные вызовы от обещаний (например, возвращаемых $http ) уже обрабатываются в цикле углового дайджеста. Не бросайте случайные вызовы $apply() в код, где они не нужны.
0

Сделайте услугу с помощью $http.get

angular.module('MyApp')
  .service('yourService',['$http', function ($http) {

    this.doMyGet = function ( callbackFunc ) {

      $http.get('YOURURL')
        .success(function (response) {
            callbackFunc(response);
        })
        .error(function (response) {
            console.log('error');
        });
    };
}]);

Передайте службу в качестве параметра для вашего контроллера, чтобы использовать его, как показано здесь:

yourService.doMyGet( function (response) {
    $scope.getMyResponse = response;
});
Поделиться
  • 0
    Должен ли я передать его в директиву также?
  • 0
    По-разному. Если вы хотите использовать услуги в рамках директивы, тогда да. В противном случае это не нужно

Ещё вопросы

Сообщество Overcoder
Наверх
Меню