angularjs 指令"directive"舉例
阿新 • • 發佈：2019-02-06
/**
* 圖示使用 font-awesome
*/
angular.module('app')
.directive('seek',function(){
return {
restrict:'A',
template:'<div style=" width: 100%;line-height: 32px; overflow: hidden;background-color: #ffffff;padding: 7px 0px">' +
'<span>' +
'<i class="fa fa-search fa-fw" style=" position: absolute;left: 22px; font-size: 13px;line-height: 38px; color: #eeeeee;"></i>'
'<i style="position: absolute;right:20%; font-size: 13px;line-height: 38px;color: #eeeeee;" class="fa fa-times-circle fa-fw" ng-if="show" ng-click="onCancelClick()"></i>' +
'</span>' +
' <input type="text" style="width: 80%; float: left; margin-left: 11px;padding: 9px 29px 9px 29px;font-size: 13px;border-radius: 5px;box-shadow: none; border:#eeeeee solid 1px;" ng-model="value" ng-click="onFocusClick()" placeholder="搜尋您感興趣的內容" > '
'<span ng-click="onSubmintClick()" style="margin-left: 8px;float: left">搜尋</span></div>',
controller: function ($scope,$state) {
//開始隱藏
$scope.show=false;
//獲取焦點
$scope.onFocusClick=function () {
$scope.show=true;
};
$scope.onCancelClick=function () {
$scope
$scope.show=false;
};
//提交
$scope.onSubmintClick=function () {
if( $scope.value!=undefined && $scope.value!='' ){
return $scope.value
}else {
$state.go('home')
}
}
}
}
})
;
* 圖示使用 font-awesome
*/
angular.module('app')
.directive('seek',function(){
return {
restrict:'A',
template:'<div style=" width: 100%;line-height: 32px; overflow: hidden;background-color: #ffffff;padding: 7px 0px">' +
'<span>' +
'<i class="fa fa-search fa-fw" style=" position: absolute;left: 22px; font-size: 13px;line-height: 38px; color: #eeeeee;"></i>'
'<i style="position: absolute;right:20%; font-size: 13px;line-height: 38px;color: #eeeeee;" class="fa fa-times-circle fa-fw" ng-if="show" ng-click="onCancelClick()"></i>' +
'</span>' +
' <input type="text" style="width: 80%; float: left; margin-left: 11px;padding: 9px 29px 9px 29px;font-size: 13px;border-radius: 5px;box-shadow: none; border:#eeeeee solid 1px;" ng-model="value" ng-click="onFocusClick()" placeholder="搜尋您感興趣的內容" > '
'<span ng-click="onSubmintClick()" style="margin-left: 8px;float: left">搜尋</span></div>',
controller: function ($scope,$state) {
//開始隱藏
$scope.show=false;
//獲取焦點
$scope.onFocusClick=function () {
$scope.show=true;
};
$scope.onCancelClick=function () {
$scope
$scope.show=false;
};
//提交
$scope.onSubmintClick=function () {
if( $scope.value!=undefined && $scope.value!='' ){
return $scope.value
}else {
$state.go('home')
}
}
}
}
})
;