【angularjs指令】简单的搜索框实现

最新推荐文章于 2024-05-30 09:33:14 发布

原创最新推荐文章于 2024-05-30 09:33:14 发布 · 7.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #搜索框 #javascript #seajs

javascript 同时被 3 个专栏收录

5 篇文章

订阅专栏

angularjs

1 篇文章

订阅专栏

组件

1 篇文章

订阅专栏

本文介绍如何结合AngularJS和Seajs创建一个简单的搜索框功能。通过JavaScript和HTML的交互，实现了在页面中引入AngularJS模块，并定义了一个名为searchModule的控制器来处理搜索操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/***
 *(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 = param
		else 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)；
	}
}])