未被捕獲的錯誤：[$ injector：modulerr] - AngularJS不能正常工作

我試圖通過使用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>

來源

2016-06-21 Sandesh Mendon

試試這個var app = angular.module（'myApp'，['bootstrapLightbox']） –

問題上，包括其他文件下面的解決提到：

<!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'，則彈出功能不起作用。

不管怎樣，謝謝大家的寶貴建議：）..乾杯！

來源

2016-06-22 15:03:10

首先，確認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，最好使用普通變量而不是declari在$範圍內。在這裏，您使用$ scope來聲明一個數組或「圖像」對象，但只能在您的lightbox中使用它，而不是直接在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); 
    };

我希望這是對您有用！

來源

2016-06-21 06:18:52 Zerok

未被捕獲的錯誤：[$ injector：modulerr] - AngularJS不能正常工作

回答

相關問題