html5 search使用,HTML5搜索输入不与引导工作(html5 search input does not work w

要跨所有设备相同的用户体验，我最后写一个角指令，我把引导“输入组BTN的。

斜视HTML

placeholder="Search text..."

title="Search" aria-label="Search"

data-ng-model-options="{'debounce':1500, 'updateOn':'blur default'}"

data-ng-model="vm.filters.listItemSearchText"/>

data-ng-disabled="!vm.filters.listItemSearchText"

aria-describedby="listItemSearch"

data-clear-search-by-aria="#listItemSearch">

{{vm.models.listSearchResults.length}}

/

{{vm.data.list.length}}

角指令的JavaScript

.directive( 'clearSearchByAria', ['$parse', function clearSearchByAria( $parse )

{

return(

{

'restrict':'A',

'link':function clearSearchByAria_link( scope, jqElem, ngAttr )

{

jqElem.on( 'click', function( $event )

{

var $clickedElem = angular.element($event.currentTarget);

var $searchInput;

// Specified by selector.

if( !!ngAttr.clearSearchByAria )

{

var $specifiedElem = angular.element(ngAttr.clearSearchByAria)

if( $specifiedElem.length == 1 )

{$searchInput = $specifiedElem;}

}

else

{

var $describedElem = $clickedElem.find( '[aria-describedby]' ).addBack( '[aria-describedby]' );

// Specified by 'aria-describedby'.

if( $describedElem.length == 1 )

{$searchInput = angular.element(''.concat( '#', $describedElem.attr('aria-describedby')));}

else

{

throw( new ReferenceError( "'clear-search-by-aria' attributes requires either 1) to be empty and for the element (or a descendant) to have an 'aria-describedby' attribute referring to another element or 2) to specify an element selector (e.g. '#id') to another element." ));

}

}

if( !!$searchInput && $searchInput.length == 1 )

{

var ng_model = $searchInput.data( 'ngModel' ) || $searchInput.attr( 'ng-model' );

if( !!ng_model )

{

var modelGetter = $parse( ng_model );

modelGetter.assign( scope, '' );

scope.$apply();

}

else

{

$searchInput.val( '' );

}

}

});

},

});

}])`