Question

我有一个自定义搜索指令，需要在同一页面上使用它的多个实例。该页面使用引导选项卡，每个选项卡中都会有一个此搜索组件的实例。

问题是第二个选项卡中的搜索指令覆盖了第一个选项卡中搜索指令的回调。这是我的搜索指令的片段：

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)
    });  
  }
}

以下是第一个标签上搜索组件的HTML代码段：

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

这就是我在第二个标签中的内容：

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

出于某种原因，当您使用Windows搜索进行搜索时，它正在调用Mac回调。有人能指出我做错了吗？我是自定义指令的新手。

Answer 1

this函数中由$timeout引起的错误。

查看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>

在同一页面上使用相同的AngularJS自定义指令

1 个答案: