Same AngularJS custom directive on same page

Question

I have a custom search directive and need to use multiple instances of it on the same page. The page makes use of bootstrap tabs and there will be an instance of this search component in each tab.

The issue is that the search directive in the second tab is overriding the callback of the search directive in the first tab. Here is a snippet of my search directive:

class SearchDirective {

constructor($timeout) {
    this.require = '^ngModel';
    this.restrict= "AE";
    this.$timeout = $timeout;
    this.scope = {
        ngModel: '=',
        searchTime: '=',
        searchCallback: '&'
    };
}


compile(tElem, tAttrs) {
    return this.link.bind(this);
}


link(scope, element, attrs) {
    this.scope = scope;
    var timer = null;

    scope.$watch('ngModel', (value, preValue) => {
        if (value === preValue) return;

        if (timer) {
            this.$timeout.cancel(timer);
        }
        timer = this.$timeout(() => {
            timer = null;
            if (value.length === 0) {
                this.scope.searchCallback();
            }
        }, this.scope.searchTime)
    });  
  }
}

And here is a snippet of the HTML for the search component on the first tab:

 <input search search-callback="searchWindowsController.searchPcs()" search-time="600" data-ng-model="searchWindowsController.searchQuery" type="text" class="searchBox" placeholder="Search Windows...">

And this is what i have in the second tab:

<input search search-callback="searchMacController.searchPcs()" search-time="600" data-ng-model="searchMacController.searchQuery" type="text" class="searchBox" placeholder="Search Macs...">

For some reason when you search using the Windows search, it is calling the Mac callback. Can someone point me to what I am doing wrong? I am new to custom directives.

They dont seem to have an isolated scope. docs.angularjs.org/guide/directive this might help. — Mukund Gandlur
– Mukund Gandlur, Commented Mar 11, 2016 at 9:30

Stepan Kasyanenko · Accepted Answer · 2016-03-11 10:19:06Z

The error due to this within the $timeout function.

See live example on jsfiddle.

'use strict'
var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope, $log) {
		$scope.callback1 = function(){
     console.log('callback1');
    };
    	$scope.callback2 = function(){
     console.log('callback2');
    };
  })
.directive('search',function($timeout){
 return new SearchDirective($timeout);
});
class SearchDirective {

  constructor(timeout) {
    this.require = '^ngModel';
    this.restrict = "AE";
    this.$timeout = timeout;
    this.scope = {
      ngModel: '=',
      searchTime: '=',
      searchCallback: '&'
    };
  }


  compile(tElem, tAttrs) {
    return this.link.bind(this);
  }


  link(scope, element, attrs) {
    this.scope = scope;
    var timer = null;
    scope.$watch('ngModel', (value, preValue) => {
      if (value === preValue) return;

      if (timer) {
        this.$timeout.cancel(timer);
      }
      timer = this.$timeout(() => {
        timer = null;
        if (value.length === 0) {
          scope.searchCallback();
        }
      }, scope.searchTime)
    });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
     <input search search-callback="callback1()" search-time="600" data-ng-model="searchQuery1" type="text" class="searchBox" placeholder="Search Mac...">
      <input search search-callback="callback2()" search-time="600" data-ng-model="searchQuery2" type="text" class="searchBox" placeholder="Search Windows...">
  </div>
</div>

Collectives™ on Stack Overflow

Same AngularJS custom directive on same page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related