我正在制作使用ngRepeat生成的ui-＆gt; li动画
我在jquery中的一个工作示例：
<div class="accordion-wrapper">
<ul class="accordion-root">
<li class="accordion-key">
<div class="accordion-group-header">item 1</div>
<ul class="accordion-group">
<li class="accordion-key">
<div class="accordion-group-header">sub item 1</div>
<ul class="accordion-group">
<li>tertiary item 1</li>
<li>tertiary item 2</li>
<li>tertiary item 3</li>
<li>tertiary item 4</li>
<li>tertiary item 5</li>
<li>tertiary item 6</li>
</ul>
</li>
<li>sub item 2</li>
<li>sub item 3</li>
<li>sub item 4</li>
<li>sub item 5</li>
</ul>
</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function() {
// initialize accordion by hiding all branches
$('.accordion-wrapper .accordion-group').hide()
/* ** Work-around for <UL> and <LI> elements not having full-width hit-areas for hover and click actions **
wrap all text items inside accordion with highlight and backlight to enable full-width item selection
.highlight is placed above the text item in the DOM and .backlight is placed below the text item
.highlight accepts all hover and click actions and turns the item's .backlight ON or OFF. */
$('.accordion-wrapper li:not(.accordion-key), .accordion-group-header')
.prepend('<div class="accordion-item-highlight"></div>')
.append('<div class="accordion-item-backlight"></div>')
/* item DOM:
<li>
<div class="accordion-item-highlight"></div>
item text
<div class="accordion-item-backlight"></div>
</li> */
$('.accordion-group-header .accordion-item-highlight').on('click', function(e) {
if(this == e.target) {
$(this).closest('.accordion-key').children('.accordion-group').toggle('fast')
}
})
})
</script>
我正在尝试使用角度js
角度示例在这里不起作用：
<accordion-group group=tree domains=nets.data.domains></accordion-group>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.js"></script>
<script type="text/javascript">
angular.module('accordion', ['ngAnimate'])
.controller('main', ['$scope', function($scope){
$scope.nets = {
"data": {
"symbols": {},
"domains": {
"Root": [
"GR_5",
"SIM069081008:Root",
"SIM069081001:Root",
"SIM069081012:Root"
],
"GR_5": [
"SIM069081001:GR_5",
"SIM069081004:GR_5"
],
"MyNetwork": ["Root"]
},
homeGroup: "MyNetwork"
}
}
var treeRootName = $scope.nets.data.domains[$scope.nets.data.homeGroup][0]
$scope.tree = $scope.nets.data.domains[treeRootName]
// if array item is a node, print it out using template else build out it's children into the next layer by passing $scope.domains.<domain-name> as the source for the next level of accordion-group
}])
.directive('accordionGroup', function() {
return {
restrict: 'E',
replace: true,
scope: { group: '=', domains: '=' },
template: ' <ul class="repeat" ng-class="repeat" ng-animate="{enter: \'repeat-enter\',leave: \'repeat-leave\',move: \'repeat-move\'}"> \
<accordion-key class="accordion-key" ng-repeat="key in group" key=key domains=domains ng-click="toggle($event, key)"></accordion-key> \
</ul>',
link: function(scope, element, attrs) {
scope.group = scope.group.map(function(key) {return {name: key} })
angular.forEach(scope.group, function(key) {
if(key.name.indexOf('SIM') == -1) {
console.log('setting collapse', key)
key.collapsed = true
console.log('collapse set complete', key)
}
})
scope.toggle = function($event, key) {
$event.stopPropagation()
key.collapsed = !key.collapsed
}
}
}
})
.directive('accordionKey', function($compile, $rootScope) {
return {
restrict: 'E',
replace: true,
scope: {key: '=', domains: '='},
template: '<li >{{key.name}}</li>',
link: function(scope, element, attrs) {
if(scope.key.name.indexOf('SIM') == -1) {
// console.log(scope.key.name, scope.key.collapsed)
$compile('<accordion-group class="accordion-group" group=domains[key.name] domains=domains ng-show=!key.collapsed></accordion-group>')(scope, function(cloned, scope) {
element.append(cloned)
})
}
}
}
})
</script>
code plnkr
我无法为UL / LI应用ngAnimate