【发布时间】：2015-01-20 17:51:51
【问题描述】：
我用幻灯片菜单创建了离子项目。我还创建了自定义可重用指令，我从 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"}}]}}
【问题讨论】：
-
对此的任何帮助将不胜感激
-
对不起，你说它在 plunkr 中可以正常工作，但你不会列出链接？
-
是的，这对我来说真的很奇怪。我用视图和控制器复制了确切的代码。我无法保持与我的项目相同的层次结构，因为我无法在 plunker 中创建文件夹。但它仍然可以在 plunkr 中正常工作，并且不能在我的桌面和模拟器上工作
标签： json angularjs angularjs-directive angularjs-ng-repeat ionic-framework