本文實例分析了AngularJS用戶選擇器指令。分享給大家供大家參考，具體如下：
在開發表單時，我們需要使用經常需要使用到用戶選擇器，用戶的數據一般使用如下方式存儲：
用戶1,用戶2,用戶3
我們可以使用angular指令實作選擇器。
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../assets/js/angular.min.js"></script>
<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../assets/css/component.css">
<link rel="stylesheet" href="../assets/css/form.css">
<link rel="stylesheet" href="../assets/css/font-awesome.min.css">
<script src="../assets/js/angular.min.js"></script>
<script type="text/javascript">
var base=angular.module("directive",[]);
base.directive('htSelector', function() {
return {
restrict : 'AE',
templateUrl:'selector.html',
scope: {
name: '=name'
},
link: function(scope, element, attrs) {
var aryName=scope.name.split(",");
scope.names=aryName;
scope.remove=function(i){
aryName.splice(i,1);
};
scope.$watch(
"names",
function (newValue,oldValue) {
if(newValue!=oldValue){
scope.name=aryName.join(",");
}
},true
);
scope.selectUser=function(){
aryName.length = 0;
aryName.push("韩信");
}
}
}
});
var app=angular.module("app",["directive"]);
app.controller('ctrl', ['$scope',function($scope){
$scope.names='自由港,马云,刘强东';
$scope.getData=function(){
console.info($scope.names)
}
}])
</script>
</head>
<body ng-controller="ctrl">
<div ht-selector name="names"></div>
<button ng-click="getData()">获取数据</button>
</body>
</html>
模版URL
<div>
<span ng-repeat="item in names">
{{item}}<a class="btn btn-xs fa-remove" title="移除该项" ng-click="remove($index)"></a>
</span>
<a class="btn btn-sm btn-primary fa-search" ng-click="selectUser()">选择</a>
</div>在指令中，使用了獨立的scope，傳入的資料為使用逗號分割的字串，我們使用了數組進行操作。
這裡的技巧是在字串和陣列之間進行轉換。
這裡使用了指令獨立的scope，使用了watch 對數組進行操作，需要注意的是如果監控數組，需要使用深度監控。
