$scope.$watch not working

Yogesh N

unread,

Aug 1, 2015, 4:32:34 AM8/1/15

to AngularJS

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>

.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

Thanks in advance.

Emmanuel DEMEY

unread,

Aug 2, 2015, 11:45:07 AM8/2/15

to ang...@googlegroups.com

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

--
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 angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
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
demey.e...@gmail.com

fr.linkedin.com/in/emmanueldemey/

Twitter : @EmmanuelDemey

Yogesh N

unread,

Aug 3, 2015, 1:48:13 AM8/3/15

to AngularJS

Hi Emmanuel

Even i have added a console.log in $watch fucntion, it will log only for first time when i open that page, after opening the page when i click on the search icon $watch function is not executed.

Thanks & Regards

Yogesh

Sander Elias

unread,

Aug 3, 2015, 2:59:47 AM8/3/15

to AngularJS

Hi Yogesh,

When you put up a plunk/codepen, illustrating your issue, we surely can help you a bit better.