Hi,
I am using angularjs custom directive for search in the navbar.
Here is the html code:
<ion-view title="Outstanding Payables">
<search-bar ng-model="search"></search-bar>
</ion-view>
<https://lh3.googleusercontent.com/-bg5lAtflGdM/VbyCrphXdHI/AAAAAAAAAEA/URbvTgy9pmA/s1600/Screenshot_2015-08-01-13-49-30.png>
<https://lh3.googleusercontent.com/-A671aXJbU44/VbyC1SiH5ZI/AAAAAAAAAEI/pp1_KP5eess/s1600/Screenshot_2015-08-01-13-49-39.png>
.directive('searchBar', [function () {
return {
scope: {
ngModel: '='
},
require: ['^ionNavBar', '?ngModel'],
restrict: 'E',
replace: true,
template: '<ion-nav-buttons side="secondary">'+
'<div class="searchBar">'+
'<div class="searchTxt" ng-show="ngModel.show">'+
'<div class="bgdiv"></div>'+
'<div class="bgtxt">'+
'<input type="text" placeholder="Search"
ng-model="ngModel.txt">'+
'</div>'+
'</div>'+
'<i class="icon placeholder-icon"
ng-click="ngModel.txt=\'\';ngModel.show=!ngModel.show"></i>'+
'</div>'+
'<button class="button button-icon ion-android-more-vertical"
ng-click="popover.show($event)">' +
'</button>' +
'</ion-nav-buttons>',
compile: function (element, attrs) {
var icon=attrs.icon
|| (ionic.Platform.isAndroid() && 'ion-android-search')
|| 'ion-search';
angular.element(element[0].querySelector('.icon')).addClass(icon);
return function($scope, $element, $attrs, ctrls) {
console.log('ctrls :' + JSON.stringify(ctrls));
var navBarCtrl = ctrls[0];
$scope.navElement = $attrs.side === 'right' ?
navBarCtrl.rightButtonsElement : navBarCtrl.leftButtonsElement;
};
},
controller : ['$scope','$ionicNavBarDelegate',
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.title();
}
});
}]
};
}])
Now the issue is when i click on the search icon, it is not executing
$scope.$watch function().
Please help me out.
Here is the example i took from codepen
<http://codepen.io/bgrossi/pen/JtvsL>
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 http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
