Question

这是我的控制器代码

 $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}}不会在弹出框中打印任何内容，因为'id_list'为空（这是不正确的）。

如果我放下以下代码

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

.then（）之外的一切正常{{item.employeeName}}在pop-over中打印employeeName

这是html（view）中的代码，它是一个输入字段，显示了drop-pop-over

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

我尝试了$ rootScope但失败了。我究竟做错了什么？我该如何解决这个问题？

Answer 1

一点理论：

$http.get返回的内容称为承诺。它是异步解析（成功时）或被拒绝（当出现问题时）。如果您参考角度承诺文档，then()接受2个函数，一个用于解析，一个用于拒绝。

通常$http调用应该在角度服务中进行（“服务”或“工厂”，这两者非常相似）。像这样的服务可以注入任何控制器或指令并重复使用。

在你的情况下：

您的承诺很有可能被拒绝，因此执行的是您传递给then()的第二个函数，它当前是空的。

先检查一下，然后告诉我。

Answer 2

在回调中设置结果后添加$scope.$apply()，它将允许角度看到在其正常行为之外所做的更改

Answer 3

使用$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;
});

Answer 4

在您的代码中访问$ 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);

    };

这应该可以正常工作

如何访问Angular JS中.then（）中定义的$ scope数组？

4 个答案: