未捕获的错误：[$injector:modulerr] - AngularJS 不工作答案

【问题标题】：Uncaught Error: [$injector:modulerr] - AngularJS not working未捕获的错误：[$injector:modulerr] - AngularJS 不工作
【发布时间】：2016-06-22 23:03:10
【问题描述】：

我正在尝试使用 Bootstrap Lightbox 在图像点击上实现模态弹出窗口，但我无法实现相同的效果。我遵循了一个示例，该示例具有与以下相同的代码。我已经下载了 Lightbox 组件（*.lightbox.js 和 *.lightbox.css）并放置在我下面的 HTML 文件所在的目录中。有人可以帮我解决这个问题吗？

<!doctype html>
<html ng-app="myApp">
<head>
<title>Sandesh</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="angular-bootstrap-lightbox.js"></script>  
<link rel="stylesheet" href="angular-bootstrap-lightbox.css">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />   
</head>
<body ng-controller="GalleryCtrl">
  <ul>
  <li ng-repeat="image in images">
    <a ng-click="openLightboxModal($index)">
      <img ng-src="{{image.thumbUrl}}" class="img-thumbnail">
    </a>
  </li>
</ul>
<script>
var app = angular.module('myApp',['bootstrapLightbox'])
.controller('GalleryCtrl', function ($scope, Lightbox) {       
   $scope.images = [
    {
     'url': '9RyWebbb.jpg',
     'thumbUrl': 'Thumb_9RyWebbb.jpg'
    }
   ];
   $scope.openLightboxModal = function (index) {
      Lightbox.openModal($scope.images, index);
   };
});
</script>
</body>      
</html>

【问题讨论】：

试试这个 var app = angular.module('myApp', ['bootstrapLightbox'])

标签： javascript angularjs angularbootstrap-lightbox

【解决方案1】：

首先，确认 modu:le 的名称是“bootstrapLightbox”。如果确实如此，请通过以下方式将其导入模块中：

var app = angular.module('myApp',['bootstrapLightbox']);

确定是否要针对变量或方法定义控制器、服务和指令：

var app = angular.module('myApp',['bootstrapLightbox']);
app.controller('GalleryCtrl', function ($scope, Lightbox) { 
  // etc
});

或

angular.module('myApp',['bootstrapLightbox'])
    .controller('GalleryCtrl', function ($scope, Lightbox) { 
      // etc
    });

那么，这可能不那么重要，但是一个很好的提示：如果你只在你的 JS 代码中使用一些对象，而不直接影响 DOM，最好使用普通变量而不是在 $scope 上声明它们。在这里，您使用 $scope 来声明一个数组或“图像”对象，然后只在您的灯箱中使用它，而不是直接在 DOM 中使用它。

所以，我会转这个...

   $scope.images = [
    {
     'url': '9RyWebbb.jpg',
     'thumbUrl': 'Thumb_9RyWebbb.jpg'
    }
   ];
   $scope.openLightboxModal = function (index) {
      Lightbox.openModal($scope.images, index);
   };

...进入这个：

   var images = [
    {
     'url': '9RyWebbb.jpg',
     'thumbUrl': 'Thumb_9RyWebbb.jpg'
    }
   ];
   $scope.openLightboxModal = function (index) {
      Lightbox.openModal(images, index);
   };

希望对你有用！

【讨论】：

【解决方案2】：

包含附加文件的问题已解决，如下所述：

<!doctype html>
<html ng-app="myApp">
.....
<link rel="stylesheet" type="text/css" href="ui-bootstrap-csp.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
....
....
</html>

另外请注意，我们包含这些文件的顺序也很重要；例如，在这种情况下，如果我们在 'ui-bootstrap.min.js' 之前添加 'ui-bootstrap-tpls.min.js'，弹出功能将不起作用

无论如何感谢大家的宝贵建议:)..干杯！

【讨论】：