Question

我试图构建一个手风琴列表，在手风琴扩展时显示更多细节。以下是模板的简化版本：

<body ng-controller="MainController as main">
    <accordion>
        <accordion-group ng-repeat="r in main.results" ng-controller="DetailsController as d">
            <accordion-heading ng-click="d.getDetails(r.id)">
                {{r.name}}
            </accordion-heading>
            <ul>
                <li ng-repeat="v in d.details">{{v.detail}}</li>
            </ul>
        </accordion-group>
    </accordion>
</body>

DetailsController最初有一个空的详细信息数组，但是当调用函数getDetails（）时，该数组由服务填充（detailsService只是一个抽象的$ resource调用）。这部分在没有应用于手风琴时起作用，但在这种特定情况下，点击手风琴标题没有任何反应。见下文：

app.controller('DetailsController', function(detailsService) {
    var vm = this

    var details = []
    var detailsPopulated = false

    var getDetails = function(id) {
        console.log('getDetails()')
        if (!vm.detailsPopulated) {
            console.log('Getting details')
            detailsService.get({id: id}, function(data) {
                vm.details = data.results
                vm.detailsPopulated = true
            });
        }
    }

    return {
        details: details,
        getDetails: getDetails
    }

});

此控制器在其他情况下有效，但由于某种原因，手风琴标题上的ng-click根本不会调用getDetails函数 - 如果有的话，我会看到＆＃34; getDetails（）＆＃34;在控制台中，因为这是getDetails函数的第一个语句。

更简单：使用mock＆＃34;详细信息＆＃34;设置控制器不起作用。

app.controller('DetailsController', function() {
    var details = [{detail: 'Test'}]

    return {
        details: details
    }
});

模板：

<body ng-controller="MainController as main">
    <accordion>
        <accordion-group ng-repeat="r in main.results" ng-controller="DetailsController as d">
            <accordion-heading>
                {{r.name}}
            </accordion-heading>
            <ul>
                <li ng-repeat="v in d.details">{{v.detail}}</li>
            </ul>
        </accordion-group>
    </accordion>
</body>

即使删除了服务和ng-click的简化示例，也不行。

有人可以建议解决方案吗？我也试图使用＆＃34;控制器作为＆＃34;技术，而不是在任何地方使用$ scope。

Answer 1

您无法将ng-click绑定到<accordion-heading>，因为ui.bootstrap会对DOM使用不同的heading。您可以查看developer console，了解ui.bootstrap将<accordion-heading>翻译成DOM的内容。

<div class="panel-heading">
    <h4 class="panel-title">
    <a href="" class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading"><span class="ng-scope ng-binding">Header 1</span></a>
    </h4>
</div>

我认为你想动态加载accordion的内容。实现此目的的一种方法是在$watch 打开时accordion执行加载。我创建了这个fiddle来证明这个想法。你必须注意的事情：

您无法将ng-controller置于accordion-group内，因为它会引发错误 multiple directive asking for isolated scope。这是因为<accordion-group>是隔离范围，而角度不允许两个范围：一个来自控制器范围，一个来自指令< strong>隔离范围绑定到相同的 html 。 Reference。解决此问题的一种方法是将div与ng-controller和ng-repeat放在accordion-group之外
```
<div ng-repeat="r in main.results" ng-controller="DetailsController as d">
    <accordion-group>
       ...
    </accordion-group>
</div>
```
您可以将attrs is-open 添加到accordion-group和$watch进行更改，然后执行加载。当您Accordion或is-open open时，close指令会更改accordion值。

希望它有所帮助。

AngularJS - ui-bootstrap手风琴 - 在ng-repeat中使用ng-controller并不起作用

1 个答案: