未知のエラー：[$ injector：modulerr] - AngularJSが動作しない

イメージをクリックしてModalポップアップを実装しようとしていますが、これを達成できません。私は以下のコードと同じコードを持つ例に従った。 Lightboxコンポーネント（* .litebox.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-tpls.min.js'の前に 'ui-bootstrap.min.js'を追加するとポップアップ機能が動作しません

おかげさまで、）..乾杯！

出典

2016-06-22 15:03:10

まず、モジュール名が "bootstrapLightbox"であることを確認します。それは実際にある場合は、経由モジュールでそれをインポートします。

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

または

：あなたは、変数に対して、コントローラ、サービス、およびディレクティブを定義する、またはかどうかを確認する

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

方法に対する

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

これはあまり重要ではないかもしれませんが、表示するには良いヒント：DOMに直接影響を与えることなく、JSコード内にオブジェクトを使用する場合は、declariそれらを$スコープに設定します。ここでは、$ 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); 
    };

私はそれがあなたのために有用であった願っています！下に述べたように、追加のファイルを含めた上で解決

出典

2016-06-21 06:18:52 Zerok

未知のエラー：[$ injector：modulerr] - AngularJSが動作しない

答えて

関連する問題