web-dev-qa-db-ja.com

Angular UI Bootstrap= Modal：[$ injector：unpr]不明なプロバイダー：$ uibModalInstanceProvider

これは少し奇妙です。この問題をオンラインで検索すると、Googleの結果の多くのページとSOソリューション...が表示されますが、機能しないようです！

一言で言えば、AngularUI Bootstrap Modalを実装しようとしています。次のエラーが発生し続けます。

エラー：[$ injector：unpr]不明なプロバイダー：$ uibModalInstanceProvider <-$ uibModalInstance <-addEntryCtrl

これが私のHTMLです。

<nav class="navbar navbar-default">
  <div class="container">
    <span class="nav-col" ng-controller="navCtrl" style="text-align:right">
      <a class="btn pill" ng-click="open()" aria-hidden="true">Add New</a>
    </span>
  </div>
</nav>

ここに私のコントローラーがあります：

var app = angular.module('nav', ['ui.bootstrap']);

app.controller('navCtrl', ['$scope', '$uibModal', function($scope, $uibModal) {
  $scope.open = function() {
    var uibModalInstance = $uibModal.open({
      animation: true,
      templateUrl: 'addEntry/addEntry.html',
      controller: 'addEntryCtrl',
    });
  };
}]);

そして最後に、ここに私のモーダルコードがあります。

var app = angular.module('addEntry', ['firebase', 'ui.bootstrap']);

app.controller('addEntryCtrl', ['$scope', '$firebaseObject', '$state', '$uibModalInstance', function($scope, $firebaseObject, $state, $uibModalInstance) {
  $scope.cancel = function() {
    $uibModalInstance.dismiss('cancel');
  };

  $uibModalInstance.close();
}]);

私が試したソリューション：

  • Angular Bootstrap（バージョン：0.14.3）とAngular（v1.4.8）の両方を更新
  • uibModalInstanceをmodalInstanceに変更
  • $ uibModalInstanceをmodalInstanceに変更しました
  • addEntryCtrlをModalInstance内に配置します

何かご意見は？これにより、ほぼ2日間、私は壁を駆け上がってきました。

*編集*

次の2つのことに注意してください。

1）addEntryから依存関係として$ uibModalInstanceを削除すると、HTMLフォーム送信ボタンは正常に機能し、フォームは完璧に見えます。リダイレクトも正しく送信されます（送信時）。問題は残ります：モーダルはまだ画面に残り、$ uibModalInstanceが未定義であるというエラーがスローされます。これは依存関係として削除したので理にかなっていますが、提出時にモーダルが近いことが明らかに必要です。

2）また、アプリの別の部分で動作するほぼ同一のコードがあります。唯一の違いは、工場経由で機能していることです。それ以外の場合、コードは同じです。したがって、依存関係がすべてあり、バージョンが正しいと確信しています。そう。おかしい。奇妙な。

ありがとう！

angularjsangular-ui-bootstrapangular-bootstrapangular-ui-modal
20
Benjamin Hoffman

回答が見つかりました！友達とハッキングしてみたところ、答えが見つかりました。他の誰かがこれを読んだ場合に備えて、ここに投稿したかった。

モーダルウィンドウにng-controllerがあり、モーダルウィンドウ内のhtmlフォーム全体をラップするdivタグ内にあったことがわかりました。以前は、フォームがモーダル（別のURLを持っていた）でないときに正常に機能していましたが、何らかの理由でモーダルになっていると壊れます。 ng-controllerはaddEntryCtrlを参照していました。削除した直後に、フォームは機能しました！

47
Benjamin Hoffman

問題は、2つの場所で（またはダブル）コントローラーを指定していたことです-モーダルを開きテンプレート内で-これは必要ありません。 テンプレートからng-controllerを削除します期待通りに動作します。信頼してください、動作します。

21
napoleonjk

Htmlテンプレート内でコントローラーを（_ng-controller="..."_で）指定すると、_$uibModalInstance_は解決されません。 $uibModal.open({controller="...", ...})の呼び出しからコントローラーを指定すると、コントローラーを正しく解決できます。

必要なのはdismiss()およびclose()メソッドのみであるため、代わりに_$scope_（名前は_$dismiss_および_$close_）から取得できます。コントローラーをインスタンス化する両方の方法で正しく解決されます。

_var app = angular.module('addEntry', ['ui.bootstrap']);
app.controller('addEntryCtrl', ['$scope', function($scope) {
    $scope.cancel = function() {
        $scope.$dismiss('cancel');
    };

    $scope.$close();
}]);
_
8
Arjan Einbu

別のモジュールの一部であるコントローラーを参照しようとしています。これが機能するには、セカンダリモジュール（addEntry）をメインモジュール（nav）に挿入する必要があります。

var app = angular.module('nav', ['ui.bootstrap', 'addEntry']);
3
Andy W

$ uibModal.open（）（下を参照）を使用してcontrollerの名前を明示的に指定する場合、テンプレートにディレクティブng-controllerを入れないでください。それがエラーの原因です。いいえng-controller in View！

 var uibModalInstance = $uibModal.open({
  animation: true,
  templateUrl: 'addEntry/addEntry.html',
  controller: 'addEntryCtrl',
});
1
icedfluid