Angular 在 plunker 上工作，但在浏览器或模拟器上不起作用

Question

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

现在问题从第一个指令过滤器开始工作得很好，但第二个指令过滤器将不起作用。当我过滤时，所有项目都会被清除，并且我从输入框中删除值，而不是仍然项目不会出现回来。

首先，我认为我的第一个指令 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引用，它的行为就开始与我的项目相同。