这个是在前端开发群里的时候，看到有人想实现一个下拉菜单，并且要实现选项能够修改，当时我觉得应该用angular实现比较简单，最开始想到的是ng-options发现，只能够实现下拉，但是不能够实现点击修改选择，因为ng-options中是自动生成下拉菜单的，不能够修改,所有我用div span模拟了一个下拉菜单，想了两种方法，第一种是jquery的思想，点击span生成一个input元素，获取数据，然后消失把数据传递给span，但是经过试验，只能够实现一次，这样不是很好，我认为应该是dom的改动，影响到了指令中link函数中的element元素，不能够正常工作，所以有想了第二种，这个就完美实现了（没有太刻意写CSS比较丑，但是功能都有），同时有span和input这样靠class类名来控制位置，效果，消除和隐藏，这样就避免了第一种情况，下面是效果图。
第一张是没有修改的
1.JPG
第二张是正在修改的效果
2.JPG
第三张是修改后效果
3.JPG
最后上代码吧，然后我把里面的知识点说一下，
<!DOCTYPE html>
<html lang="en" ng-app="selectAPP">
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.min.js" type="text/javascript"></script>
<script src="lib/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="lib/bootstrap.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.css"/>
<style>
*{
padding: 0;
margin: 0;
}
.box{
position: relative;
left: 200px;
top: 50px;
border: 1px solid blue;
height: 400px;
width: 500px;
}
.box p{
position: absolute;
left: 0;
top: 0;
display: block;
height: 20px;
width: 200px;
background: seagreen;
}
.box .content {
position: absolute;
top: 20px;
}
.box .content div{
background: #5265eb;
width: 200px;
height: 30px;
border:1px solid greenyellow;
}
.box .content div span{
background: skyblue;
width: 200px;
height: 30px;
display: block;
}
.show{
display: block;
}
.hide{
display:none;
}
</style>
</head>
<body >
<div ng-controller="selectController">
<div class="box">
<p ng-click="flag=!flag">content</p>
<div class="content" ng-class="{true:'show',false:'hide'}[flag]" >
<div><my-directive ></my-directive></div>
<!--<span>one</span>
<span>two</span>
<span>three</span>-->
</div>
<h1 style="position: absolute;top:120px ">{{message}}</h1>
</div>
</div>
<div ng-controller="selectController2">
<div class="box">
<p ng-click="flag=!flag">content</p>
<div class="content" ng-class="{true:'show',false:'hide'}[flag]">
<my-directive2></my-directive2>
</div>
</div>
</div>
</body>
<script>
var app=angular.module('selectAPP',[]);
app.controller('selectController', function ($scope) {
$scope.flag=false;
});
app.directive('myDirective',['$compile',function ($compile){
return{
restrict:'EA',
replace:true,
template:' <span ng-model="message">12</span>',
link: function (scope,element,attr) {
var div=element.parent();
element.on('dblclick', function () {
var input=angular.element('<input type="text" ng-model="message" />');
var inputafter=$compile(input)(scope);
var span=angular.element('<span ng-model="message"></span>');
var spanafter=$compile(span)(scope);
div.append(inputafter);
element.remove();
setTimeout(function (){
div.find('input').remove();
div.append(spanafter).find('span').html(scope.message);
},4000);
});
}
}
}]);
app.controller('selectController2',['$scope', function ($scope) {
$scope.flag=false;
}]);
app.directive('myDirective2', function () {
return{
restrict:'EA',
replace:true,
template:'<div ><span>{{message}}</span> <input type="text" ng-model="message"></div>',
link: function (scope,element,attr) {
scope.message="one";
element.find('input').addClass('hide');
element.find('span').on('dblclick', function () {
element.find('span').removeClass('show').addClass('hide');
element.find('input').removeClass('hide').addClass('show');
});
element.find('input').on('blur', function () {
element.find('input').removeClass('show').addClass('hide');
element.find('span').removeClass('hide').addClass('show');
})
}
}
})
</script>
</html>
大家用的比较少的可能是$compile这个有两个用途，一个是生成angular的DOM元素的服务，并且连接scope的数据，如果不使用那就不连接数据，只是一个angularDOM，这需要传入当前scope，另外一个就是在指令中用来替代link函数的编译函数，这个网上资料都有，可以搜一下，或者改天我写一下。
angular.element这个的意思是包裹成angular元素。连接数据之前的angularDOM；
