我正在使用离子框架创建移动应用程序。我面临以下问题。我创建了一个高级搜索选项并添加了一个弹出选项,用户可以在其中选择高级搜索条件。但由于某种原因,甚至我的控制器中的$ scope.companies数组似乎也没有将这些变化反映回我的观点。这似乎与我的指令有关,但我似乎无法弄清楚如何解决它。非常感谢您的帮助。如果我删除该指令它工作正常,但我需要它为我的动态搜索。
这是我的控制器代码
.controller('CompanySearchCtrl', function ($scope, $state, $ionicModal, $ionicPopup, regions, countries, crmdataservice, companyservice) {
$scope.showAlert = function(title, msg) {
var alertPopup = $ionicPopup.alert({
title: title,
template: msg,
cssClass: 'bar-assertive',
okType: 'button button-assertive'
});
};
$scope.regions = regions.data;
$scope.countries = countries.data;
var value = window.localStorage.getItem("loginId");
if(!value){
$state.go('login');
}
$scope.companies = [];
$scope.getCompaniesByName = function (name) {
return crmdataservice.getCompaniesByName(name);
};
$scope.setCompanyId = function (companyId) {
companyservice.setCompanyId(companyId);
};
$ionicModal.fromTemplateUrl('templates/company-search-filter.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.modalFilter = modal;
});
$scope.openModalFilter = function () {
$scope.advanceSearch = {
"regionId": "",
"country": "",
"showTop10": false
};
$scope.modalFilter.show()
};
$scope.closeModalFilter = function (search) {
if(search){
if($scope.advanceSearch.regionId && $scope.advanceSearch.country){
$scope.showAlert("ERROR", "Please don't select both region and country. Please select one");
}
else if(!$scope.advanceSearch.regionId && !$scope.advanceSearch.country){
$scope.showAlert("ERROR", "Please select a region or country to search.");
}
else{
if($scope.advanceSearch.regionId && !$scope.advanceSearch.country){
crmdataservice.getCompaniesByRegion($scope.advanceSearch.regionId, $scope.advanceSearch.showTop10).then(function(response){
$scope.companies = response.data;
}, function(error){
$scope.showAlert("ERROR", error.data);
});
}
if(!$scope.advanceSearch.regionId && $scope.advanceSearch.country){
crmdataservice.getCompaniesByCountry($scope.advanceSearch.country, $scope.advanceSearch.showTop10).then(function(response){
$scope.companies = response.data;
}, function(error){
$scope.showAlert("ERROR", error.data);
});
}
$scope.modalFilter.hide();
}
}
else{
$scope.modalFilter.hide();
}
};
$scope.$on('$destroy', function () {
$scope.modalFilter.remove();
});
$scope.clearSearchFilter = function(){
$scope.advanceSearch = {
"regionId": "",
"country": "",
"showTop10": false
};
};
})
这是我的模板视图代码
<ion-view view-title="Search Companies">
<ion-content>
<div class="bar bar-header bar-positive item-input-inset">
<qbuild-search class="search-wrapper-light" placeholder="Search for a company" min-length="1"
model="companies" source="getCompaniesByName(name)"></qbuild-search>
<i class="button button-clear icon ion-funnel" ng-click="openModalFilter()"></i>
</div>
<ion-list ng-show="companies.length">
<ion-item ng-repeat="company in companies" href="#/app/companymaster"
ng-click="setCompanyId(company.companyId)">
<div class="item item-avatar">
<img src="img/company.png"/>
<h2>{{company.companyName}}</h2>
<p>
{{company.city}}, {{company.province}}
<br/>
{{company.zipCode}} {{company.country}}
<br ng-show="company.prEmail"/>
<a ng-show="company.prEmail" href="mailto:{{company.prEmail}}">{{company.prEmail}}</a>
<br ng-show="company.webSite"/>
<a ng-show="company.webSite" href="{{company.webSite}}">{{company.webSite}}</a>
</p>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
这是我的指令代码
angular.module('starter.directives', [])
.directive('qbuildSearch', function () {
return {
restrict: 'E',
replace: true,
scope: {
getData: '&source',
model: '=?',
search: '=?filter'
},
link: function (scope, element, attrs) {
attrs.minLength = attrs.minLength || 0;
scope.placeholder = attrs.placeholder || '';
scope.search = {
value: ''
};
if (attrs.class)
element.addClass(attrs.class);
if (attrs.source) {
scope.$watch('search.value', function (newValue, oldValue) {
if (newValue.length > attrs.minLength) {
scope.getData({
name: newValue
}).then(function (results) {
scope.model = results.data;
});
} else {
scope.model = [];
}
});
}
scope.clearSearch = function () {
scope.search.value = '';
};
},
templateUrl: 'templates/qbuildsearch.html'
};
});
这是指令模板
<div class="item-input-wrapper">
<i class="icon ion-search"></i>
<input type="search" placeholder={{placeholder}} ng-model="search.value">
<i ng-if="search.value.length > 0" ng-click="clearSearch()" class="icon ion-close-circled"></i>
</div>
由于