使用Angularjs指令可以封装一些通用的组件可以被不同的模块间共用。

在表单中我们习惯用一个对象去绑定所有的表项。

<ham-select-search datas="vm.action.selectOpts" value="vm.cache.currentItem.location"></ham-select-search>

在上面的代码中我们定义了一个简单的指令，从指令中可以看出，这个指令的属性有两个，一个datas，一个value.

datas：为我们绑定的下拉数组，这个数组一般是通过后台请求获取的，形如

vm.action.selectOpts = ["1111111","111111222222","22222222","33333","44444","555555"];

value：为我们绑定的对象属性，在实际操作时，我们会将选择的值直接赋值给vm.cache.currentItem.location（这其实就是一个对象的属性）。

那我们大概知道我们需要封装什么样的指令了，他至少包含我们的两个属性。

angular.module('am.guest.manager').directive('hamSelectSearch', hamSelectOptionsDirective);function hamSelectOptionsDirective() {return {restrict: 'AE', //attribute or elementscope: {datas: '=',value: '='},template: ''// replace: true,link: function ($scope, elem, attr, ctrl) {}};}

那么我们接下来就需要去生成我们的输入框和下拉框的模板。我这里面有一些封装的样式和校验，这个不需要理会。

angular.module('am.guest.manager').directive('hamSelectSearch', hamSelectOptionsDirective);function hamSelectOptionsDirective() {return {restrict: 'AE', //attribute or elementscope: {datas: '=',value: '='//bindAttr: '='},template: '<input type = "test" style="width:100%" class="form-control" ng-change="changeKeyValue(value)"' +' ng-model="value" style = "display:block;" ' +'ng-click = "hidden=!hidden" value="{{value}}"/></input>' +'<div ng-hide="hidden" style="z-index:-1">' +' <select style = "width:100%" ng-change="change(x)" ng-model="x" multiple>' +'  <option ng-repeat="data in datas" >{{data}}</option>' +' </select>' +'</div>',// replace: true,link: function ($scope, elem, attr, ctrl) {}};}

我们知道封装的指令在模板中定义的事件我们需要单独去处理，那我我们可以使用其link方法来实现。

不过需要一点逻辑处理才能将我们的应用跑起来。

当用户输入的时候我们除了去后台获取数据(当然你也可以在其他的位置处理数据的问题)之外，还需要将隐藏的下拉框显示出来，同时根据用户输入的值进行模糊匹配，匹配出符合规则的数据。当用户删除时，我们需要做特殊的处理，就是输入值为空则显示全部的数据信息。

angular.module('am.guest.manager').directive('hamSelectSearch', hamSelectOptionsDirective);function hamSelectOptionsDirective() {return {restrict: 'AE', //attribute or elementscope: {datas: '=',value: '='//bindAttr: '='},template: '<input type = "test" style="width:100%" class="form-control" ng-change="changeKeyValue(value)"' +' ng-model="value" style = "display:block;width:200px" ' +'ng-click = "hidden=!hidden" value="{{value}}"/></input>' +'<div ng-hide="hidden" style="z-index:-1">' +' <select style = "width:100%" ng-change="change(x)" ng-model="x" multiple>' +'  <option ng-repeat="data in datas" >{{data}}</option>' +' </select>' +'</div>',// replace: true,link: function ($scope, elem, attr, ctrl) {$scope.tempdatas = $scope.datas; //a temp array to store the datas$scope.hidden = true;//show ot hide the select$scope.value = '';//the data user input//set the value of selected value to input$scope.change = function (x) {console.log("x",x);$scope.value = x[0];$scope.hidden = true;}//compare the input value to data array.If the temp array contains the input value . put it to newData and set it to $scope.datas//If no compare , will set the $scope.datas = $scope.tempdatas$scope.changeKeyValue = function (v) {var newData = []; //temp arrayangular.forEach($scope.tempdatas, function (data, index, array) {if (data.indexOf(v) >= 0) {newData.unshift(data);}});//replace the temp to resource array$scope.datas = newData;//下拉选展示$scope.hidden = false;//if input value is null , reset the $scope.datasif ('' == v) {$scope.datas = $scope.tempdatas;}console.log($scope.datas);}}};}

那么我们在使用时就可以展现出想要的效果。

看一下值有没有正常赋值成功