无法在 plunker 中添加 angular 应用程序依赖项

Question

我正在尝试创建一个使用 AngularJS 和 UI-Bootstrap 的 plunkr。一旦我想添加 "ui-bootstrap" 依赖项，预览不会评估 {{}} 绑定。事实上，只要我输入任何内容作为依赖项（"ui-bootstrap" 甚至“”），代码就会失败。如果我将数组留空，一切正常。

angular.module("myApp", [/*leaving this empty works, otherwise bindings wont be resolved*/]).controller("myCtrl", function ($scope) {
        //controller stuff
    }
]);

http://plnkr.co/edit/38sWnHVSS3lfYSB5oPzp?p=preview

怎么了？

Answer 1

我看了一下，好像嵌套太多了。

$scope.MainCtrl = {
      groups : [
        {heading: "A", content: "This is the first accordion group", opened:true},
        {heading: "B", content: "This is the second accordion group", opened: false},
        {heading: "C", content: "This is the last accordion group", opened:false}
      ]
    };

在这里您将 MainCtrl 定义为一个新对象，然后在其中嵌套组。

angular.module('plunker', [])
  .controller('MainCtrl', function($scope) {
    $scope.groups = [
        {heading: "A", content: "This is the first accordion group", opened:true},
        {heading: "B", content: "This is the second accordion group", opened: false},
        {heading: "C", content: "This is the last accordion group", opened:false}
    ];

  });

工作：http://plnkr.co/edit/Le2awE24GJiM3N6h8uQO?p=preview

Answer 2

在你的 plunker 中你使用了 ui-bootstrap，而文档说使用：ui.bootstrap。

应该是

angular.module('plunker', ['ui.bootstrap'])

Answer 3

您可以找到一个带有手风琴的工作示例 here。 bootstrap 没有编译手风琴的问题是由于它需要创建默认模板。当仅使用 link

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.js"></script>

找不到这两个模板。所以我下载了带有模板的 angular-boostrap 代码并将其添加到 plunkr + 注入了依赖项并且它工作正常。请注意，建议删除的嵌套也在本示例中完成，因此在控制器中只有：

 $scope.groups = [
    {heading: "A", content: "This is the first accordion group", opened:true},
    {heading: "B", content: "This is the second accordion group", opened: false},
    {heading: "C", content: "This is the last accordion group", opened:false}
];

无法在 plunker 中添加 angular 应用程序依赖项

Can't add angular app dependency in plunkr

javascript

angularjs

plunker