99

ブートストラップ モーダル ウィンドウを実装しようとしているときに、このエラーが発生し続けます。その原因は何ですか？http://angular-ui.github.io/bootstrap/#/modalここからすべてをコピーして貼り付けました。

4

6 に答える 6

201

この種のエラーは、コントローラー、サービスなどの依存関係を記述し、その依存関係を作成または含めていない場合に発生します。

この場合、$modalは既知のサービスではありません。angular をブートストラップするときに依存関係として ui-bootstrap を渡さなかったようです。angular.module('myModule', ['ui.bootstrap']);また、念のため、最新バージョンの ui-bootstrap (0.6.0) を使用していることを確認してください。

このエラーはバージョン 0.5.0 でスローされますが、0.6.0 に更新すると $modal サービスが利用できるようになります。したがって、バージョン 0.6.0 に更新し、モジュールを登録するときに ui.boostrap を要求するようにしてください。

コメントへの返信:これは、モジュールの依存関係を挿入する方法です。

<!-- tell Angular what module we are bootstrapping -->
<html ng-app="myApp" ng-controller="myCtrl">

js:

// create the module, pass in modules it depends on
var app = angular.module('myApp', ['ui.bootstrap']);

// $modal service is now available via the ui.bootstrap module we passed in to our module
app.controller('myCtrl', function($scope, $uibModal) {

});

アップデート：

$modalサービスの名前が に変更されました$uibModal。

$uibModal の使用例

// create the module, pass in modules it depends on
var app = angular.module('myApp', ['ui.bootstrap']);

// $modal service is now available via the ui.bootstrap module we passed in to our module
app.controller('myCtrl', function($scope, $uibModal) {
    //code here
});
于 2013-09-11T06:11:19.600 に答える
55

5年後 （これは当時は問題ではなかったでしょう）：

名前空間が変更されました - 新しいバージョンのbootstrap-uiにアップグレードすると、このメッセージに出くわすことがあります。$uibModal&を参照する必要があります$uibModalInstance。

于 2016-01-21T09:48:33.010 に答える
22

今日私が経験した問題の補足的な注意:ソース コードの圧縮/醜化をオンにすると、「不明なプロバイダー: $aProvider」という同様のエラーが発生しました。

Angular docs チュートリアル (段落: 「A Note on Minification」)で述べたように、配列構文を使用して、依存性注入のために参照が正しく保持されていることを確認する必要があります。

var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];

Angular UI Bootstrapの例では、これを置き換える必要があると述べています。

var ModalInstanceCtrl = function ($scope, $modalInstance, items) { 
   /* ...example code.. */
}

この配列表記では:

var ModalInstanceCtrl = ['$scope', '$modalInstance', 'items', function ($scope, $modalInstance, items) { 
   /* copy rest of example code here */ 
}];

その変更により、縮小された Angular UI モーダル ウィンドウ コードが再び機能するようになりました。

于 2013-09-18T11:19:20.537 に答える
0 
var ModalInstanceCtrl = ['$scope', '$modalInstance',  function ($scope, $modalInstance, items) { 
   /* copy rest of example code here */ 
}];
于 2015-07-30T16:06:02.177 に答える