如何用 angularjs material 實(shí)現(xiàn)搜索框

Material 提供了大量的android 風(fēng)格的UI組件，使用 angularjs + Material 可以很容易開發(fā)出風(fēng)格接近原生 Android 5.x 的web界面。但在實(shí)際使用的過程中并不總是能滿足我們的需求。開發(fā)一個(gè)組件就成了我們必須學(xué)習(xí)的內(nèi)容。

下面是一個(gè)組件的實(shí)現(xiàn):

//前面省略若干代碼
directive('mdSearchInput',[function(){

????return{
????????restrict:'E',
????????controller:['$scope','$timeout',function($scope,$timeout){
????????????var?tsk=null;
????????????$scope.delay=1000;
????????????$scope.on_changed=function(){
????????????????if(null?!==?tsk)?{$timeout.cancel(tsk);}?//去掉前一個(gè)任務(wù)
????????????????tsk?=?$timeout(function(){
????????????????????$timeout.cancel(tsk);tsk=null;
???????????????????$scope.onSearch()($scope.searchText);
????????????????},$scope.delay);
????????????};$scope.on_clear=function(){
????????????????var?tsk=null;$scope.searchText='';
????????????????tsk=$timeout(function(){
????????????????????$timeout.cancel(tsk);tsk=null;
????????????????????$scope.onSearch()($scope.searchText);
????????????????},100);
????????????}

????????}],
????????scope:{
????????????inputName:??????'@mdInputName',
????????????searchText:?????'=?mdSearchText',
????????????onSearch:???????'&?mdSearch',
????????????placeholder:????'@placeholder',
????????????delay:????????????'@delay'
????????},
????????template:'\',
????????link:function($scope,?$element){

????????}
????};
}]);

CSS 樣式:

.md-search-input{
??box-sizing:?border-box;border:?none;box-shadow:?none;background:?0?0;?border-radius:5px;background:?#FFF;margin:0px;position:?relative;
??input{outline:?0;font-size:?14px;?width:?100%;?padding:?0?15px;?line-height:?40px;height:?40px;border:?none;background:transparent;}
??button,.md-fab,.md-button,button:hover,.md-fab:hover?{
????background:transparent?!important;
????line-height:40px;height:40px;width:40px;font-size:14px;box-shadow:none?!important;margin:0px;padding:0px;
????color:rgba(0,0,0,0.5)?!important;
??}
}

配合 ng-route 可以很容易實(shí)現(xiàn)無刷新的APP 讓您的web頁面更加接近app體驗(yàn)，

在 maincontroll中，通過監(jiān)聽 ng-route 的頁面即將跳轉(zhuǎn)事件 來重置消息框，

?//在頁面改變之前,重置搜索框.
????$scope.$on('SearchText.Reset',function(){?$scope.searchConfig={show:false,?key:'',delay:1200};});
????$rootScope.$on('$routeChangeStart',?function?(event,?next)?{
????????$rootScope.$broadcast('SearchText.Reset');
????});

而在需要用到搜索功能的地方，則只需要在控制器里通過如下代碼實(shí)現(xiàn)：

?//陪值搜索框?yàn)榧河?????$scope.$emit('Search.Config',{
????????show:true,?key:'',delay:800,
????????emptyText:"請(qǐng)輸入:商家名稱,賬號(hào),電話?等內(nèi)容以進(jìn)行搜索.",
????????onSearch:?function(){
????????????return?function(v){
????????????????$scope.merData.query(v);?//調(diào)用本控制器的數(shù)據(jù)查詢接口.
????????????}
????????}
????});