Angular UI - Bootstrap手风琴不起作用/动态ng-include

Question

我有一个关于手风琴的问题:

我尝试做与演示相似的事情，我有一个对象数组。每个对象包含一个字符串，它是标题标题。它还包含一个字符串，该字符串是指向另一个HTML文件的相对路径，该文件应该是手风琴组的内容。

$scope.groups = [{
    groupTitle: "Title1",
    templateUrl: "sites/file1.html"
}, {
    groupTitle: "Title2",
    templateUrl: "sites/file2.html"
}];

这段代码在一个名为AccordionController的控制器中。 在我的HTML文件中，我将这段代码放置在控制器内。

<accordion>
    <accordion-group ng-repeat="group in groups" heading="{{group.groupTitle}}">
        <div ng-include="group.templateUrl"></div>
    </accordion-group>
</accordion>

ng-include和其他东西都可以工作，但是这些组件基本上不会对点击做出反应以打开或关闭，我还尝试添加了is-open指令。使用参数指向一个布尔数组，在ng-click中更改特定的值。

让人恼火的事情是，我真的不明白为什么所有这些都在Plunker中可以正常工作。

我还链接了

<link rel="stylesheet" type="text/css" href="styles/bootstrap.min.css" />
<script type="text/javascript" src="scripts/angular.js"></script>
<script type="text/javascript" src="scripts/ui-bootstrap-tpls-0.12.0.js"></script>

我在我的模块中添加了bootstrap.ui。

当我加载它时，控制台会显示错误信息：TypeError: undefined is not a function。

我会非常感谢任何帮助！

- Ba5t14n

Answer 1

我找到了解决方法：

首先，将控制器命名为AccordionController会与Angular UI Bootstrap中的内部控制器产生冲突。

我不确定这是否是最佳解决方案，但对我来说它运行得很好。

这里是HTML代码：

<div ng-controller="AccordionCtrl">
    <accordion class="accordion" close-others="oneAtATime">
        <accordion-group  ng-repeat="group in groups" is-open="status.isOpen[$index]" >
            <accordion-heading>
                {{group.groupTitle}} <i class="fa chevron-icon" ng-class="{'fa-chevron-down': status.isOpen[$index], 'fa-chevron-right': !status.isOpen[$index]}"></i>
            </accordion-heading>
            <div ng-include="group.templateUrl"></div>
        </accordion-group>
    </accordion>
</div>

当然还有JS：

settings.controller('AccordionCtrl', ['$scope',
function ($scope) {
    $scope.oneAtATime = false;

    $scope.groups = [{
        groupTitle: "Test1",
        templateUrl: "file1.html"
    }, {
        groupTitle: "Test2",
        templateUrl: "file2.html"
    }, {
        groupTitle: "Test3",
        templateUrl: "file3.html"
    }];

    $scope.status = {
        isOpen: new Array($scope.groups.length)
    };

    for (var i = 0; i < $scope.status.isOpen.length; i++) {
        $scope.status.isOpen[i] = (i === 0);
    }
}]);

- Ba5t14n

Answer 2

我已经复制了你的plnkr。加载模板文件。

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
  $scope.groups = [
    {
      title: 'Dynamic Group Header - 1',
      content: 'Dynamic Group Body - 1',
      templateUrl: 'file1.html'
    },
    {
      title: 'Dynamic Group Header - 2',
      content: 'Dynamic Group Body - 2',
      templateUrl: 'file2.html'
    }
  ];
});


<div ng-controller="AccordionDemoCtrl">

  <accordion>
    <accordion-group ng-repeat="group in groups" heading="{{group.title}}">
      <div ng-include="group.templateUrl"></div>
    </accordion-group>
  </accordion>
</div>

- dhavalcengg

---

谢谢您。在 plnkr 上它运行得很好 - 就像我想要的！不幸的是，在我的应用程序中它不起作用。我有两个模块（app和settings），在手风琴中有3个具有该范围的控制器。在这两个模块中，我都添加了 bootstrap.ui 并且这些模块也互相知道。 - Ba5t14n

当然，在NodeWebkit中，我遇到了上述问题。我试图将手风琴制作为独立的来解决我的问题，在NodeWebkit中我得到了相同的错误。在Firefox中，我得到了“Error: d.addGroup is not a function”的错误。错误的最后一行（在Firefox中）是：“<div ng-repeat="group in groups" heading="{{group.groupTitle}}" class="panel panel-default ng-isolate-scope"”。 - Ba5t14n

你有没有查看过这个？ - dhavalcengg

我现在尝试了很多次 - 终于搞定了，我会在这里发布答案。 非常非常感谢。 - Ba5t14n

Answer 3

实际上，可能有一个更简单的解决方案。

您只需确保链接不会传播URL更改即可。

在a标签中添加onclick="return false;"

来源：点击这里

- Ankit