web-dev-qa-db-ja.com

$ uibModalInstance undefined（AngularJS UI.Bootstrap）

$ uibModalInstanceをここに挿入できないのはなぜですか？

http://plnkr.co/edit/mi9Ytv0HaqE47ENod4Gn?p=preview

baseController.$inject = ['$uibModal', '$uibModalInstance'];

function baseController($uibModal, $uibModalInstance) {

self.ok = function () {
$uibModalInstance.close(self.selected.item);
};

self.cancel = function () {
$uibModalInstance.dismiss('cancel');
};

$ uibModalInstanceにアクセスしようとしていますが、インジェクションしようとすると、インジェクションエラーが発生します。

私がそれを注入しない場合、それは未定義です...

angularjsmodal-dialogangular-ui-bootstrap
5
RenleyRenfield

ですから、ここにはたくさんの素晴らしい声明がありますが、どれも問題を完全に解決していません。

amg-arghは、注入を設定した方法でplkrを機能させました

http://plnkr.co/edit/GXXmUosUEnEO3Tk0gUyp?p=preview

最大の魔法はここでのこの編集から来ました...

var childController = function ($scope, $uibModalInstance) {
        $scope.ok = function () {
            $uibModalInstance.close({ my: 'data' });
        }
        $scope.cancel = function () {                
            $uibModalInstance.dismiss();
        }
    }

    self.open = function (size) {

        var modalInstance = $uibModal.open({
            animation: self.animationsEnabled,
            templateUrl: 'help.html',
            controller: childController,
            size: size
        });
    };

+++++++++++++++++++++++++++++

また、icfantvが指摘しているように、これは後でサービスとして実行する必要があることにも注意してください。しかし、モーダルの約束を返し、消費するための構文を理解する必要があります...

みなさん、ありがとうございました!!

乾杯！

3
RenleyRenfield

プランクの例にはいくつか問題がありました。

スクリプトをロードする順序は重要です。次のようになりました。

<script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script src="app.module.js"></script>
<script src="childController.js"></script>
<script src="baseController.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>

App.module.jsはangular-ui-bootstrap.jsに依存し、childController.jsはangular-animate.jsに依存し、childController.jsはbaseController.jsに依存するため、これは機能しません。スクリプトを次の順序でロードする必要があります。 ：

<script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="app.module.js"></script>
<script src="baseController.js"></script>
<script src="childController.js"></script>

Childcontroller.jsには、次のものがあります。

angular
      .module('app', ['ngAnimate'])

これは、app.module.jsで作成された「アプリ」を再作成して上書きします。次のように、app.module.jsにngAnimateモジュールを挿入する必要があります。

angular
    .module('app', ['ngAnimate', 'ui.bootstrap']);

ベースコントローラーで$ uibModalInstanceへの参照は必要ありません。

var modalInstance = $uibModal.open({
  animation: self.animationsEnabled,
  templateUrl: 'help.html',
  controller: 'BaseController',
  size: size
});

closeメソッドとdismissメソッドを持つ「varmodalInstance」を介して開いたモーダルにアクセスできます。

1
Rob J

コードが失敗する理由は、モーダルを作成する責任があるコントローラーにモーダルインスタンスを注入しようとしているためだと思います。まだ存在しないため、注入できません。別々のコントローラーを使用してみてください。1つはモーダルを開くためのもので、もう1つはモーダルコンテンツを処理するためのものです。この例は、 モーダルの例 のJavascript部分で確認できます。

TBH、依存関係がそのように注入されるのを見たことがありません。そうすることで解決している問題はありますか？使用しているだけではない理由：

angular.module(...).controller('MyController', ['dep1', dep2', ..., MyControllerFunction]);
function MyControllerFunction(dep1, dep2) {...}
1
icfantv