Html:
<search-bar ng-model="search"></search-bar>
app.js:
.directive('searchBar', [function () {
return {
scope: {
ngModel: '='
},
require: ['^ionNavBar', '?ngModel'],
restrict: 'E',
replace: true,
template: '<ion-nav-buttons side="right">'+
'<div class="searchBar">'+
'<div class="searchTxt" ng-show="ngModel.show">'+
'<div class="bgdiv"></div>'+
'<div class="bgtxt">'+
'<input type="text" placeholder="Search..." ng-model="productObject.searchAgenda">'+
'</div>'+
'</div>'+
'<i class="button button-clear" ng-class="{\'icon-disabled-opacity\' : showdate}" ng-click="updateSelection();" title="Show all dates">All</i>'+
'</div>'+
'</ion-nav-buttons>',
compile: function (element, attrs) {
var icon=attrs.icon
|| (ionic.Platform.isAndroid() && 'ion-android-search')
|| (ionic.Platform.isIOS() && 'ion-ios7-search')
|| 'ion-search';
angular.element(element[0].querySelector('.icon')).addClass(icon);
return function($scope, $element, $attrs, ctrls) {
var navBarCtrl = ctrls[0];
$scope.navElement = $attrs.side === 'right' ? navBarCtrl.rightButtonsElement : navBarCtrl.leftButtonsElement;
};
}
};
}])
yourCTRL.js:
app.controller('searchBarCtrl', function($scope,$ionicNavBarDelegate){
var title, definedClass;
$scope.$watch('ngModel.show', function(showing, oldVal, scope) {
if(showing!==oldVal) {
if(showing) {
if(!definedClass) {
var numicons=$scope.navElement.children().length;
angular.element($scope.navElement[0].querySelector('.searchBar')).addClass('numicons'+numicons);
}
title = $ionicNavBarDelegate.getTitle();
$ionicNavBarDelegate.setTitle('');
} else {
$ionicNavBarDelegate.setTitle(title);
}
} else if (!title) {
title = $ionicNavBarDelegate.getTitle();
}
});
});
<search-bar ng-model="search"></search-bar>
app.js:
.directive('searchBar', [function () {
return {
scope: {
ngModel: '='
},
require: ['^ionNavBar', '?ngModel'],
restrict: 'E',
replace: true,
template: '<ion-nav-buttons side="right">'+
'<div class="searchBar">'+
'<div class="searchTxt" ng-show="ngModel.show">'+
'<div class="bgdiv"></div>'+
'<div class="bgtxt">'+
'<input type="text" placeholder="Search..." ng-model="productObject.searchAgenda">'+
'</div>'+
'</div>'+
'<i class="button button-clear" ng-class="{\'icon-disabled-opacity\' : showdate}" ng-click="updateSelection();" title="Show all dates">All</i>'+
'</div>'+
'</ion-nav-buttons>',
compile: function (element, attrs) {
var icon=attrs.icon
|| (ionic.Platform.isAndroid() && 'ion-android-search')
|| (ionic.Platform.isIOS() && 'ion-ios7-search')
|| 'ion-search';
angular.element(element[0].querySelector('.icon')).addClass(icon);
return function($scope, $element, $attrs, ctrls) {
var navBarCtrl = ctrls[0];
$scope.navElement = $attrs.side === 'right' ? navBarCtrl.rightButtonsElement : navBarCtrl.leftButtonsElement;
};
}
};
}])
yourCTRL.js:
app.controller('searchBarCtrl', function($scope,$ionicNavBarDelegate){
var title, definedClass;
$scope.$watch('ngModel.show', function(showing, oldVal, scope) {
if(showing!==oldVal) {
if(showing) {
if(!definedClass) {
var numicons=$scope.navElement.children().length;
angular.element($scope.navElement[0].querySelector('.searchBar')).addClass('numicons'+numicons);
}
title = $ionicNavBarDelegate.getTitle();
$ionicNavBarDelegate.setTitle('');
} else {
$ionicNavBarDelegate.setTitle(title);
}
} else if (!title) {
title = $ionicNavBarDelegate.getTitle();
}
});
});
Thanks for sharing this valuable information to our vision. You have posted a trust worthy blog keep sharing.Nice article i was really impressed by seeing this article, it was very interesting and it is very useful for me.
ReplyDeleteAngularjs Training In Hyderabad