Question

我用slidemenu创建了离子项目。我还创建了自定义可重用指令，其中我从rest api获取数据并将其值分配给ng-repeat的指令，它就像下拉列表，但它在模态弹出窗口中打开。因此，当我从第一个指令中选择值时，我将过滤另一个rest api，为另一个实例的同一指令分配数据。在那里我有输入框作为过滤器，过滤ng-repeat项目

现在在第一个指令过滤器中的问题开始非常好但第二个指令过滤器不起作用。当我过滤时，所有项目都会清除，我从输入框中删除值，但仍不会显示项目。

首先我认为我的第一个指令json对象是1级，这是它工作的原因，第二个指令json是嵌套对象。

因此，我创建了具有相同精确代码的plunker，其工作方式与魅力相似，但在桌面或模拟器上无效。

有人可以告诉我可能是什么问题。我没有把plunker链接起来，因为它工作得非常好，所以它毫无价值

Directive code

angular.module('plexusSelect', []).directive('plexusSelect', ['$ionicModal',
    function($ionicModal) {
        // Runs during compile
        return {
            scope: {
                'items': '=',
                'text': '@',
                'textIcon': '@',
                'headerText': '@',
                'textField': '@',
                'textField2': '@',
                'valueField': '@',
                'callback': '&'
            },
            require: 'ngModel',
            restrict: 'E',
            templateUrl: 'templates/plexusSelect.html',
            link: function($scope, iElm, iAttrs, ngModel) {
                if (!ngModel) return; // do nothing if no ng-model
                $scope.allowEmpty = iAttrs.allowEmpty === 'false' ? false : true;
                $scope.defaultText = $scope.text || '';
                $ionicModal.fromTemplateUrl('plexusSelectItems.html', {
                    'scope': $scope
                }).then(function(modal) {
                    $scope.modal = modal;
                    $scope.modal['backdropClickToClose'] = false;
                });
                $scope.showItems = function($event) {
                    $event.preventDefault();
                    $scope.modal.show();
                }
                $scope.hideItems = function() {
                    $scope.modal.hide();
                }
                /* Destroy modal */
                $scope.$on('$destroy', function() {
                    $scope.modal.remove();
                });
                $scope.viewModel = {};
                $scope.clearSearch = function() {
                    $scope.viewModel.search = '';
                }
                /* Get field name and evaluate */
                $scope.getItemName = function(field, item) {
                    return $scope.$eval(field, item);
                }
                $scope.validateSingle = function(item) {
                    $scope.text = $scope.$eval($scope.textField, item) + ($scope.textField2 !== undefined ? " (" + $scope.$eval($scope.textField2, item) + ")" : "");
                    $scope.value = $scope.$eval($scope.valueField, item);
                    $scope.hideItems();
                    if (typeof $scope.callback == 'function') {
                        $scope.callback($scope.value);
                    }
                    ngModel.$setViewValue($scope.value);
                }              
                $scope.$watch('text', function(value) {
                    if ($scope.defaultText === value) $scope.placeholder = 'placeholderGray';
                    else $scope.placeholder = 'placeholderBlack';
                });
            }
        };
    }
])

Directive html

    <ion-list>
        <ion-item class="item-text-wrap item" ng-click="showItems($event)">
            <a class="item-icon-left item-icon-right">
                <i class="icon {{textIcon}} placeholderGray"></i>
                <span class="{{placeholder}}">{{text}}</span>
                <i class="icon ion-chevron-right"></i>
            </a>
        </ion-item>
    </ion-list>


<script type="text/ng-template" id="plexusSelectItems.html">
    <ion-view class="select-items modal">
    <ion-header-bar class="bar-positive" has-subheader="true">
      <button ng-click="hideItems()" class="button button-positive button-icon ion-ios7-arrow-back"></button>
      <h1 class="title">{{headerText}}</h1>
    </ion-header-bar>
    <ion-header-bar class="bar-light bar-subheader bar bar-header item-input-inset">
      <div class="item-input-wrapper">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="search" ng-model="viewModel.search" placeholder="select city...">
        <button ng-show="viewModel.search.length" ng-click="clearSearch()" class="customIcon button button-icon ion-close-circled input-button"></button>
      </div>
    </ion-header-bar>
    <ion-content>
      <div class="list">
        <label ng-repeat="item in items | filter:viewModel.search" class="item item-text-wrap" ng-click='validateSingle(item)'>
          {{getItemName(textField, item)}} {{textField2 !== undefined ? " (" + getItemName(textField2, item) + ")" : ""}}
        </label>
      </div>
    </ion-content>
  </ion-view>
</script>

My Controller

.controller('SearchCtrl', ['$scope', '$http',
    function($scope, $http) {
        $http.get("http://xxxx/lists/getbytitle('xxx')/items?$select=City_Code,City_Name_EN&$filter=Active eq 1&$orderby=City_Name_EN asc", {
            headers: {
                Accept: "application/json;odata=verbose"
            }
        }).then(function(resp) {
            $scope.deptStations = resp.data.d.results;
        }, function(err) {
            console.log(err);
        });
        $scope.deptStation = {
            value: null
        };
        $scope.arrStation = {
            value: null
        };
        $scope.$watch('deptStation.value', function(deptStation) {
            $http.get("http://xxx/lists/getbytitle('xxx')/items?$select=Destination/City_Code,Destination/City_Name_EN&$expand=Destination/City_Code,Destination/City_Name_EN&$filter=Origin/City_Code eq '" + deptStation + "'&$orderby=Destination/City_Name_EN asc", {
                headers: {
                    Accept: "application/json;odata=verbose"
                }
            }).then(function(resp) {
                $scope.arrStations = resp.data.d.results;
            }, function(err) {
                console.log(err);
            });
        });
    }
]);

My First Directive JSON

{"d":{"results":[{"City_Name_EN":"Abu Dhabi","City_Code":"AUH"},{"City_Name_EN":"Alexandria","City_Code":"HBE"},{"City_Name_EN":"Amman","City_Code":"AMM"},{"City_Name_EN":"Bahrain","City_Code":"BAH"},{"City_Name_EN":"Bangkok","City_Code":"BKK"}]}}

My Second Directive JSON

{"d":{"results":[{"Destination":{"City_Code":"HBE","City_Name_EN":"Alexandria"}},{"Destination":{"City_Code":"BKK","City_Name_EN":"Bangkok"}},{"Destination":{"City_Code":"MAA","City_Name_EN":"Chennai"}},{"Destination":{"City_Code":"COK","City_Name_EN":"Cochin"}}]}}

Answer 1

真的我讨厌这个，但结果却是新版本中的一个错误。

在plunkr上我引用了1.0.0-beta.1 ionic.bundle.min.js

在我的项目中，我引用了最新版本1.0.0-beta.14 ionic.bundle.min.js

一旦我将项目的同一版本js文件替换为plunkr引用，它的行为与我项目中的行为相同。

在plunker上工作但不能在浏览器或模拟器上工作

1 个答案: