我将 UI-Bootstrap 与这个简单的 Accordion 菜单一起使用。我试图嵌套它们,但我无法获取嵌套元素的范围。
ng-click
也不起作用,我猜是因为它已经被用来打开和关闭 Accordion 了。有没有办法从子元素到达父元素?
HTML:
<div ng-controller="accCtrl">
<accordion close-others="oneAtATime">
<accordion-group heading="Classic Accoridion (1)" is-open="$parent.step1">
<a href="" ng-click="clasClick()">Classic Click</a>
</accordion-group>
<accordion-group heading="Nested Accordian (2)" is-open="$parent.step2">
<accordion close-others="oneAtATime">
<accordion-group heading="Test (3)" is-open="$parent.step3">
<a href="" ng-click="nestClick()">Nested Click</a>
</accordion-group>
</accordion>
</accordion-group>
</accordion>
<p>
Step1: {{step1}}
<br/>Step2: {{step2}}
<br/>Step3: {{step3}}
<br/>
<a href="" ng-click="openTwo()">Open Two</a>
<br/>
<a href="" ng-click="openThree()">Open Three</a>
</p>
JS:
function accCtrl($scope, $http, $timeout) {
$scope.oneAtATime = true;
$scope.step1 = true;
$scope.step2 = false;
$scope.step3 = false;
$scope.openTwo = function() {
$scope.step2 = true;
}
$scope.openThree = function() {
$scope.step3 = true;
}
$scope.clasClick = function() {
console.log("classic clicked");
}
$scope.nestClick = function() {
console.log("nested clicked");
}
}
最佳答案
看起来每个 Accordion 指令都在创建自己的作用域。有关更多详细信息,您必须在 https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js 查看 Accordion 的实现。
要访问父级的父级,您可以像这样输入 $parent.$parent:
<accordion close-others="oneAtATime">
<accordion-group heading="Classic Accoridion (1)" is-open="$parent.step1">
<a href="" ng-click="clasClick()">Classic Click</a>
</accordion-group>
<accordion-group heading="Nested Accordian (2)" is-open="$parent.step2">
<accordion close-others="oneAtATime">
<accordion-group heading="Test (3)" is-open="$parent.$parent.$parent.step3">
<a href="" ng-click="$parent.$parent.$parent.nestClick()">Nested Click</a>
</accordion-group>
</accordion>
</accordion-group>
</accordion>
关于javascript - 管理嵌套 UI Bootstrap Accordion 中的范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22326089/