Hi Yogesh I have just added a console.log in your $watch function, and the function is executed each time I click on the search icon.
Manu @EmmanuelDemey 2015-08-01 10:32 GMT+02:00 Yogesh N <[email protected]>: > 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. > -- Emmanuel DEMEY Consultant Zenika +33 (0)6 47 47 42 02 [email protected] - fr.linkedin.com/in/emmanueldemey/ Twitter : @EmmanuelDemey -- 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.
