這個是在前端開發群里的時候，看到有人想實現一個下拉菜單，并且要實現選項能夠修改，當時我覺得應該用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；
