【angularjs指令】简单的搜索框实现
来源:互联网 发布:用ant编译java 编辑:程序博客网 时间:2024/06/06 05:02
/*** *(options)是否必填,类型,说明: *(ng)1 , object , angularApp对象 * *(ngScope): *(value)0 , string , 单向绑定的value对象 *(searchCall)1 , function , search回掉函数 *(keyChangeCall)1 , function , 内容变化回掉函数 */define(function(require, exports, module) {module.exports = function(param) {var options = {};if (param.directive) options.ng = paramelse options = param;if (!options.ng) return false;var domString = ["<div class='input-group input-group-sm'>","<span class='input-group-btn'>","<button class='btn btn-primary' type='button' ng-click='searchCall({value:value})'>搜索</button>","</span>","<input type='text' class='form-control' ng-model='value' ng-keyup='keyup($event)'/>","</div>"].join("");options.ng.directive('stSearch', function() {return {scope: {"searchCall": "&","value": "=","keyChangeCall": "&changeCall"},restrict: "E",template: domString,replace: true,compile: function(element, attrs, transclude) {return function($scope) {$scope.$watch('value', function(newValue, oldValue) {$scope.keyChangeCall({newValue: newValue,oldValue: oldValue});});$scope.keyup = function(e) {var keycode = window.event ? e.keyCode : e.which;if (keycode == 13) {$scope.searchCall({value: $scope.value})}}}},controller: function($scope) {}}})return true;}})
以上代码是基于seajs的简略封装,可以从第17或26行自行拆分
以下为基于seajs的使用方式
js层面引用:
require('js/search')(ng);//在init文件中引用,ng为app对象
HTML层面调用:
<div ng-controller="searchModule"><st-search search-call="searchCall(value)" value="value" change-call="keyChangeCall(newValue, oldValue)" class="col-md-4 col-md-offset-4 col-sm-12"></st-search></div>
searchModule controller:
ng.controller('searchModule', ["$scope", "$rootScope", function(scope, rootScope) {scope.searchCall = function(value) {rootScope.$broadcast('searchEvent', value);}scope.value = "石头web";//初始输入框内容scope.keyChangeCall = function() {console.log(arguments);}}])
0 0
- 【angularjs指令】简单的搜索框实现
- angularjs一些简单的指令
- angularjs material 实现搜索框
- angularJs-$http实现百度搜索时的动态下拉框
- angularjs之间如何实现指令和指令之间的交互
- angularjs之间如何实现指令和指令之间的交互
- angularjs的过滤器实现搜索与排序
- 简单的搜索实现
- angularjs指令-hello指令简单用法
- 最简单的搜索框的实现
- AngularJs 的指令
- angularjs指令的使用
- AngularJS 风谲云诡的指令
- AngularJS 大雅之堂的指令
- angularjs的指令详解
- AngularJS 内置的指令
- 理解Angularjs的指令
- AngularJS的指令
- 工程项目管理的作用
- cenots7 安装gitlab和Jenkins持续集成开发环境
- Spring注解的使用规范
- [JAVA] java多线程设计wait、notify、notifyall、synchronized的使用机制
- Linux中nc命令是一个功能强大的网络工具,全称是netcat。
- 【angularjs指令】简单的搜索框实现
- linux 时间函数
- redis通用key操作命令(总)
- 【品高云技巧】002.通过弹性IP控制网络流量(QoS)
- 数据库开源库使用基本方法总结
- 16.11.4
- Linux下chkconfig命令详解
- div+css简单实现圆形头像
- 1