可以't在plunkr中添加angular应用程序依赖项

Can't add angular app dependency in plunkr

本文关键字：angular 添加 应用程序 依赖 plunkr 可以      更新时间：2023-09-26

我正在尝试创建一个使用AngularJS和UI Bootstrap的plunkr。当我想添加"ui引导"依赖项时，预览不会立即评估｛｛｝｝绑定。事实上，只要我输入任何依赖项（"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

怎么了？

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

应该是

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

您可以在这里找到一个具有accordion的工作示例。引导程序没有编译accordion的原因是创建时需要默认模板。仅使用链接时

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

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

$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

相关文章：