值得注意的几个地方:
1.指令directive中的scope拥有独立的作用域,每一个template也是拥有自己的作用域,不和其他的相互影响,这样一来就简化了工作;
2.当没有id时候,如何在指定DOM添加属性,比如id,display…
运用:
$(element).find('.hideMenu').attr('id', 'multi-act');
通过$(element)来通过class来找到该DOM。
3.阻止事件冒泡(作用:其他的click事件并不影响自身)
实现代码如下:
scope.stopProp = function(e){
e.stopPropagation();
};
4.在HTML中,可以向directive传值:
<td ng-click="stopProp($event)">
<my-ctrl src="srcData" default="defaultData" index="{{$index}}"></my-ctrl>
</td>
源程序:
html:
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/angular-csp.css"/>
<link rel="stylesheet" href="css/index.css"/>
<title>angular-js实现</title>
</head>
<body ng-controller="multi">
<div>
<table class="table">
<th id="xuHao">序号</th>
<th id="items">具体项目</th>
<tr ng-repeat="item in defaultData"> <!--控制行数-->
<td style="align-items:center">{{$index+1}}<div ng-show="false">{{a = $index}}</div></td>
<td ng-click="stopProp($event)">
<my-ctrl src="srcData" default="defaultData" index="{{$index}}"></my-ctrl>
</td>
</tr>
</table>
<div class="bottom"><button ng-click="add()">添加一行</button></div>
</div>
<script src="js/angular.js"></script>
<script src="js/index.js"></script>
<script src="js/jquery-1.8.0.js"></script>
<script src="js/jquery-1.8.0.min.js"></script>
<script>
// $(function(){
// $(".bottom").click(function(event){
// var e=window.event || event;
// if(e.stopPropagation){
// e.stopPropagation();
// }else{
// e.cancelBubble = true;
// }
// $(".hideMenu").show();
// });
// $(".table").click(function(event){
// var e = window.event || event;
// if(e.stopPropagation){
// e.stopPropagation();
// }else{
// e.cancelBubble = true;
// }
// });
//
// document.onclick = function(){
// $(".hideMenu").hide();
// };
// })
</script>
</body>
</html>
index.js:
var app = angular.module('myApp',[]);
//声明filterController
app.controller('multi', function ($scope,$http) {
$scope.trCounter = 0;
//数据源
$http.get("json/Data.json")
.success(function (response) {
$scope.srcData = response;
});
//默认数据
$http.get("json/default.json")
.success(function(response){
$scope.defaultData = response;
});
//添加一行
$scope.add=function(){
$scope.itemTemplate={ //默认显示数据 主要是用来控制行数;
"id": $scope.trCounter, //初始值为0;
"selected": [] //符合上面的格式 [{"id":'',"selected":[]}];
};
$scope.trCounter+=1; //相当于是id+1;
$scope.defaultData.push($scope.itemTemplate);
};
//阻止事件冒泡
$scope.stopProp = function(e){
e.stopPropagation();
};
});
app.directive('myCtrl',function(){
return {
restrict:'EA',
scope:{ //隔离的作用域 所以必须要用指令才能完成
index:'@',
src:'=',
default:'='
},
transclude:true,
template:
'<div ng-click="stopProp($event)">' +
'<div>'+
'<div class="tab" ng-click="toggle();flag()" >'+
'<div class="item" ng-repeat="item in default[index].selected" ng-click="stopProp($event);moveToSrc($index,index)">{{item.name}}</div>'+
'<div class="arrow">▼</div>'+
'</div>'+
'<div class="hideMenu" id="multi-act-hide">'+
'<div class="item" ng-repeat="srcItem in src" ng-click="stopProp($event);moveToTr($index,index)">{{srcItem.name}}</div>'+
'</div>'+
'</div>' +
'</div>',
link: function (scope, element, attrs, ctrl) { //临编译前的修改
//默认不显示下拉菜单
$(element).find('.hideMenu').attr('id', 'multi-act-hide')
scope.stopProp = function(e){
e.stopPropagation();
};
//点击弹出或收起下拉菜单
scope.toggle = function() {
scope.showMe =! scope.showMe;
};
scope.moveToSrc = function($index,index) {
var item = this.item;//被点击的按钮
scope.src.push(item);
scope.default[index].selected.splice($index,1);
};
scope.moveToTr = function($index,index) {
scope.default[index].selected.push(scope.src[$index]);
scope.src.splice($index,1);
}
scope.flag = function(){
$('#multi-act').removeAttr('id');
$(element).find('.hideMenu').attr('id', 'multi-act');
$(element).find('.tab').attr('id', 'toggle');
}
//失去焦点后关闭弹出菜单 实现
document.onclick=function(){
$('#multi-act').removeAttr('id');
}
}
}
});
index.css:
.table{
width: 600px;
height: 300px;
margin:auto;
padding: 10px;
border-radius:6px;
border:1px solid #ccc;
margin-top: 100px;
}
h2{
align-items: center;
justify-content: center;
display:flex;
}
.tab{
width: 600px;
height: 30px;
border-radius:2px;
color:#000;
display:flex;
justify-content: center;
align-items: center;
border:1px solid #ccc;
background-color: #f8f8f8;
margin-right: 10px;
padding: 2px;
margin-top: 10px;
position:relative;
}
.bottom{
position:absolute;
right: 250px;
top: 450px;
}
.item{
border-radius:2px;
float: left;
width: 50px;
height: 20px;
color:#000;
display:flex;
justify-content: center;
align-items: center;
border:1px solid #ccc;
background-color: #f8f8f8;
margin-right: 10px;
}
.arrow{
position:absolute;
right: 15px;
top: 8px;
}
th{
height: 30px;
text-align: center;
align-items: center;
}
td{
height: 50px;
text-align: center;
}
#multi-act
display: block;
}
.hideMenu{
display: none;
}
程序到此结束:)