I just want to make a directive of search page. I just create a directive
in layout.js and define all methods used in search. i just use tag
<search></search> on my other pages to redirect directive and then on
button click i just filter the data but data not filtered in other pages.
*My layout.js code:*
(function () {
var controllerId = 'app.views.layout';
angular.module('app').controller(controllerId, [
'$scope', '$location', 'abp.services.vault.lightBox',
'abp.services.vault.resource', '$window',
'abp.services.vault.resourceDetail', 'abp.services.vault.category',
'abp.services.vault.user',
function ($scope, $location, lightBoxService, resourceService,
$window, resourceDetailService, categoryService, userService) {
var vm = this;
vm.isAdmin = false;
$scope.editResource = function (data) {
var detail = data;
localStorage.setItem("detail", JSON.stringify(detail));
$window.location.href = "#/editResource";
$window.location.reload();
}
$scope.imageDetail = function (data) {
$scope.popUpInfo = [];
$scope.popUpInfo.push(data);
}
$scope.resourceDetail = function (data) {
var detail = data;
sessionStorage.setItem("detail", JSON.stringify(detail));
$window.location.href = "#/resourceDetail";
window.location.reload();
}
$scope.addLightBox = function (data) {
$scope.isAllow = "";
vm.lightBoxInfo = { ResourceId: data.id, FileUrl:
data.fileUrl }
lightBoxService.createLightBox(vm.lightBoxInfo).success(function (result) {
abp.notify.info("Resource Added To Your LightBox");
});
}
userService.userIsAdmin().success(function (data) {
vm.isAdmin = data;
});
}]).directive("search", [
function () {
return {
//restrict: 'E',
scope: {},
template: '<div class="row"><div class="col-md-3">' +
'</div>' +
'<div class="col-md-9">' +
'<form class="header-addre-form" name="categoryForm">' +
'<div class="row">' +
'<div class="col-md-6">' +
'<input id="search" class="col-md-5"
placeholder="Search" type="text" ng-model="searchInfo.categoryName">' +
'</div>' +
'<div class="col-md-1"></div>' +
'<div class="selectParent col-md-5">' +
'<div class="row">' +
'<select name="category"
ng-model="searchInfo.CategoryId">' +
'<option ng-selected="true" value="">All
Categories</option>' +
'<option ng-repeat="category in
categories" value="{{category.id}}">{{category.categoryName}}</option>' +
'</select>' +
'<button id="search_btn" class="fa fa-search"
ng-click="search()"></button>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="row">' +
'<div class="col-md-12">' +
'<div class="search_menu">' +
'<span class="search-menu">' +
'<label class="lighbox_menu"><a href=""
id="btnBest" class="" ng-click="bestResource()">Best Match</a></label>' +
'<label class="lighbox_menu"><a href=""
id="btnNew" ng-click="newResources()">New</a></label>' +
'<label class="lighbox_menu"><a href=""
id="btnMost" ng-click="mostPopular()">Most Popular</a></label>' +
'<label class="lighbox_menu"><a href=""
id="btnExpire" ng-click="expiredResources()">Expired</a></label>' +
'</span>' +
'<div class="search_align">' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</form>' +
'</div></div>',
replace: 'true',
controller: ['$scope', '$http', '$window',
'abp.services.vault.lightBox', 'abp.services.vault.resource',
function ($scope, $http, $window, lightboxService,
resourceService) {
$scope.error = false;
$scope.totalResult = false;
function simpleSearch(keywords, categoryId) {
$scope.MainCategoryFilter = [];
$scope.MainFilter = [];
$scope.CategoryFilter = [];
$scope.subCategoryFilter = [];
$scope.fileTypeFilter = [];
$scope.colourProfileFilter = [];
$scope.licenseTypeFilter = [];
$scope.CategoriesFilter = [];
$scope.MainFilter.push(categoryId);
$scope.mainCategory = { MainIds: $scope.MainFilter }
categoryService.getFilterCatagory($scope.mainCategory).success(function
(data) {
$scope.CategoriesFilter.push(categoryId); //Add
Main CategoryId
angular.forEach(data.categories, function (value,
key) {
$scope.CategoriesFilter.push(data.categories[key].id); //Add Sub-CategoryId
});
$scope.filters = { CategoryIds:
$scope.CategoriesFilter, FileTypeIds: $scope.fileTypeFilter,
ColourProfileIds: $scope.colourProfileFilter, LicenseTypeIds:
$scope.licenseTypeFilter, Keyword: keywords };
resourceService.getFilterResource($scope.filters).success(function (data) {
if (data.resources == "") {
$scope.error = true;
$scope.totalResult = false;
abp.notify.info("No Resources Available");
$scope.Resources = data.resources;
}
else {
//abp.notify.info("Found Resources");
$scope.error = false;
var currentPage = 1;
$scope.Resources = data.resources;
$scope.range = {
lower: (currentPage - 1) * 24 + 1,
upper: Math.min(currentPage * 24,
data.resources.length),
total: data.resources.length
}
$scope.totalResult = true;
}
})
});
}
$scope.getResource = function () {
$scope.totalResult = false;
$scope.loading = true;
angular.element(document.querySelector("#btnExpire")).removeClass("best-search");
angular.element(document.querySelector("#btnNew")).removeClass("best-search");
angular.element(document.querySelector("#btnMost")).removeClass("best-search");
$scope.filterResources =
JSON.parse(localStorage.getItem("filterSearchResult"));
if ($scope.filterResources != null) {
angular.element(document.querySelector("#btnBest")).addClass("best-search");
$scope.searchInfo = { categoryName:
$scope.filterResources.categoryName, CategoryId:
$scope.filterResources.CategoryId }
simpleSearch($scope.filterResources.categoryName,
$scope.filterResources.CategoryId);
localStorage.removeItem("filterSearchResult");
$scope.loading = false;
}
else {
var bestMatch = "";
resourceService.getResources(bestMatch).success(function (data) {
$scope.Resources = data.resources;
var currentPage = 1;
$scope.Resources = data.resources;
$scope.range = {
lower: (currentPage - 1) * 24 + 1,
upper: Math.min(currentPage * 24,
data.resources.length),
total: data.resources.length
}
$scope.totalResult = true;
$scope.loading = false;
})
}
}
$scope.myMethod = function (currentPage, previousPage) {
$scope.range.lower = (currentPage - 1) * 24 + 1;
$scope.range.upper = Math.min(currentPage * 24,
$scope.range.total);
$scope.range.total = $scope.range.total;
}
$scope.expiredResources = function () {
debugger;
$scope.totalResult = false;
$scope.loading = true;
angular.element(document.querySelector("#btnExpire")).addClass("best-search");
angular.element(document.querySelector("#btnNew")).removeClass("best-search");
angular.element(document.querySelector("#btnMost")).removeClass("best-search");
angular.element(document.querySelector("#btnBest")).removeClass("best-search");
resourceService.getExpiredResources().success(function (data) {
debugger;
if (data.resources == "") {
$scope.error = true;
$scope.totalResult = false;
$scope.Resources = data.resources;
$scope.loading = false;
}
else {
$scope.error = false;
$scope.Resources = data.resources;
var currentPage = 1;
$scope.Resources = data.resources;
$scope.range = {
lower: (currentPage - 1) * 24 + 1,
upper: Math.min(currentPage * 24,
data.resources.length),
total: data.resources.length
}
$scope.totalResult = true;
$scope.loading = false;
}
});
}
$scope.bestResource = function () {
angular.element(document.querySelector("#btnBest")).addClass("best-search");
$scope.getResource();
}
$scope.newResources = function () {
$scope.totalResult = false;
$scope.loading = true;
angular.element(document.querySelector("#btnNew")).addClass("best-search");
angular.element(document.querySelector("#btnMost")).removeClass("best-search");
angular.element(document.querySelector("#btnBest")).removeClass("best-search");
angular.element(document.querySelector("#btnExpire")).removeClass("best-search");
resourceService.getNewResources().success(function
(data) {
$scope.error = false;
$scope.Resources = data.resources;
var currentPage = 1;
$scope.Resources = data.resources;
$scope.range = {
lower: (currentPage - 1) * 24 + 1,
upper: Math.min(currentPage * 24,
data.resources.length),
total: data.resources.length
}
$scope.totalResult = true;
$scope.loading = false;
})
}
$scope.mostPopular = function () {
$scope.totalResult = false;
$scope.loading = true;
angular.element(document.querySelector("#btnMost")).addClass("best-search");
angular.element(document.querySelector("#btnBest")).removeClass("best-search");
angular.element(document.querySelector("#btnExpire")).removeClass("best-search");
angular.element(document.querySelector("#btnNew")).removeClass("best-search");
lightBoxService.getLightBoxes().success(function
(data) {
if (data.lightBoxes == "") {
$scope.error = true;
$scope.totalResult = false;
$scope.Resources = data.lightBoxes;
$scope.loading = false;
abp.notify.info("No Most Popular Resource");
}
else {
$scope.error = false;
$scope.Resources = data.lightBoxes;
var currentPage = 1;
$scope.Resources = data.lightBoxes;
$scope.range = {
lower: (currentPage - 1) * 24 + 1,
upper: Math.min(currentPage * 24,
data.lightBoxes.length),
total: data.lightBoxes.length
}
$scope.totalResult = true;
$scope.loading = false;
}
})
};
$scope.search = function () {
simpleSearch(searchInfo.categoryName,
searchInfo.CategoryId);
}
}
]
}
}]);
})();
*Code to call directive on other pages:*
<search></search>
Now what is the way to filter the result on other pages.?
Please help !
Thanks in advance
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
