我正在使用 AngularJS 的 ui-boostrap 中的 uib-accordion 指令。 我有一个关于从嵌入指令 uib-accordion-group 中传递值的问题。
当简单地将变量设置为 Accordion 内部的 ng-model 时，它将附加到 Accordion 作用域，而不是父主作用域，尽管由于 transclude 指令，它看起来像是在主作用域中。
为了将 Accordion 内部的值传递到主范围，我需要执行类似 ng-model="$parent.$parent.$parent.data2 的操作，这似乎是错误的。
有没有办法优雅地做到这一点？
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function($scope) {
});<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AccordionDemoCtrl">
<script type="text/ng-template" id="group-template.html">
<div class="panel {{panelClass || 'panel-default'}}">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span
ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
</script>
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="Static Header, initially expanded" is-open="true">
<div>
Simple data model
<input type="text" ng-model="data" />Anti-pattern data2 model
<input type="text" ng-model="$parent.$parent.$parent.data2" />
</div>
<div>
I read "{{data}}" inside the accordion
</div>
<div>
I read "{{data2}}" inside the accordion
</div>
</uib-accordion-group>
</uib-accordion>
<div>
How do I read "{{data}}" OUTSIDE the accordion
</div>
<div>
Data2 seems fine "{{data2}}" OUTSIDE the accordion
</div>
</div>
</body>
</html>最佳答案
我最近遇到了一个相关问题，最后我修改了 ui-bootstrap-tpls-0.14.3.js 文件。在第 239 行，您可以看到我已将一个名为“model”的属性添加到了 Accordion 指令的作用域对象中。
scope: {
heading: '@', // Interpolate the heading attribute onto this scope
isOpen: '=?',
isDisabled: '=?',
model: '=' // Custom property added
},
然后在 Controller 中，我将一个名为 item1 的对象添加到 Controller 的作用域中，并为其指定一个名为 name 的属性:
$scope.item1 = {
name: 'test1'
};
最后，向 Accordion Group 指令添加“model”属性，并将 item1 指定为要传递到 Accordion 指令的值:
<uib-accordion-group model="item1" heading="Static Header, initially expanded" is-open="true">
您现在应该能够在折叠面板中设置对象的属性值以及在指令外部访问它们。
这是一个经过修改后可以工作的代码。
http://plnkr.co/edit/44x8pH?p=preview
我对修改 UI 引导文件不太满意，但我想不出更好的方法来做到这一点。显然，您需要在本地存储自己的文件副本，以便可以修改它，我建议在文件名中添加 .custom 以提醒您它已被修改。可能也会出现一些评论，以便您可以将所做的任何更改迁移到 future 版本，以防您想要升级。
关于javascript - 将值从 uib-accordion 范围传递到父范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34464687/