离子类型与离子过滤器-棒 - 不能参考$scope

Ionic typeahead with ionic-filter-bar - cannot reference $scope

本文关键字：参考 scope 不能 过滤器 类型      更新时间：2023-09-26

我正在尝试实现离子过滤器栏，以便在我的离子移动应用程序上提前工作，并且在尝试确定控制器中的$scope时遇到问题。我一直在复制此处找到的演示应用程序中的大部分代码：

https://github.com/djett41/ionic-filter-bar/blob/master/demo/app/scripts/app.js

我可以确定 $scope.hops 以便在页面上正确呈现的 ng-repeat 中正确显示所有对象（无需搜索），但我无法在 showFilterBar 函数中引用 $scope.hops。输出到控制台时收到未定义.log（请参阅代码中的注释）。我认为这与在其他函数中访问$scope的方式有关（？？），但被卡住了。

谁能帮我一把？提前谢谢。

控制器 

//Added $ionicFilterBar & $timeout - Remove if does not work
.controller("hopsListCtrl", function($scope, hopsService, $stateParams, $state, $ionicFilterBar, $timeout) {
    hopsService.getHops().then(function(hops) {
        //This correctly returns my object of hop varieties
        $scope.hops = hops;

    })

    $scope.onSelectHopsDetail = function(hops_detail) {
        $state.go('tab.hopsDetail', hops_detail);
        hopsService.postHopDetails(hops_detail);

    };
    var filterBarInstance;
    //This returns "undefined" -
    console.log($scope.hops);
    $scope.showFilterBar = function() {
        filterBarInstance = $ionicFilterBar.show({
            hops: $scope.hops,
            update: function(filteredItems) {
                $scope.hops = filteredItems;
                //This returns "undefined"
                console.log(filteredItems);
            },
            filterProperties: 'Name'
        });
    };
    $scope.refreshItems = function() {
        if (filterBarInstance) {
            filterBarInstance();
            filterBarInstance = null;
        }
        $timeout(function() {
            getItems();
            $scope.$broadcast('scroll.refreshComplete');
        }, 1000);
    };

})

啤酒花列表页面

<ion-view title="Hops Guide">
    <ion-nav-buttons side="secondary">
        <button class="button-icon icon ion-ios-search" ng-click="showFilterBar()">
        </button>
    </ion-nav-buttons>
    <ion-content direction="y" scrollbar-y="false">
        <ion-refresher pulling-icon="ion-arrow-down-b" on-refresh="refreshItems()">
        </ion-refresher>
        <ion-list>
            <ion-item collection-repeat="hop in hops">
                <a class="" ng-click="onSelectHopsDetail(hop)">
                    <p>{{hop.Name}}</p>
            </ion-item>
        </ion-list>
        <div ng-if="hops !== undefined && !hops.length" class="no-results">
            <p>No Results</p>
        </div>
    </ion-content>
</ion-view>

您需要使用 items 属性，而不是跳转到筛选器栏服务。 所以你对showFilterBare的调用应该是

filterBarInstance = $ionicFilterBar.show({
        items: $scope.hops,
        update: function(filteredItems) {
            $scope.hops = filteredItems;
            //This returns "undefined"
            console.log(filteredItems);
        },
        filterProperties: 'Name'
    });

您正在设置$scope.hops何时成功解析承诺（即异步）。基本上，您正在执行控制台.log在承诺得到解决之前，并且范围上没有跃点。网上有关于承诺的信息语气。我个人喜欢这样的解释：https://stackoverflow.com/a/15738351/3927379

替换

filterBarInstance = $ionicFilterBar.show({
    items: $scope.hops,
    update: function(filteredItems) {
        $scope.hops = filteredItems;
        //This returns "undefined"
        console.log(filteredItems);
    },
    filterProperties: 'Name'
});

跟

filterBarInstance = $ionicFilterBar.show({
    items: $scope.hops,
    update: function(filteredItems, filterText) {
        $scope.hops = filteredItems;
        //This returns "undefined"
        console.log(filteredItems);
    },
    filterProperties: 'Name'
});
相关文章：