Uncaught Error: [$injector:modulerr] - AngularJS not working

Question

我正在尝试通过使用 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>

Answer 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 来声明一个数组或 "image" 对象，但随后仅在您的灯箱中使用它，而不是直接在 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);
   };

希望对你有用！

Answer 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'，弹出功能将不起作用

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

Uncaught Error: [$injector:modulerr] - AngularJS not working

Uncaught Error: [$injector:modulerr] - AngularJS not working

javascript

angularjs

angularbootstrap-lightbox