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

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

应该是

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

Answer 2

有了比例的工作示例，您可以找到here。 bootstrap没有编译accortion的问题是由于创建时需要的默认模板。仅使用链接时

<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}
];

Answer 3

我看了一下，似乎你把它嵌套太多了。

$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

无法在plunkr中添加角度应用依赖项

3 个答案: