web-dev-qa-db-ja.com

angular uiエラー：$ modal.openは関数ではありません

Angular-UI v0.10.0（ http://angular-ui.github.io/bootstrap/ ）とAngular）を使用してモーダルを表示しようとしています= 1.1.5で、次のエラーが表示されます。

エラー：$ modal.openは関数ではありません

このエラーが発生する理由がわかりません。これが私が持っているものです...

HTML：

    <div ng-controller="ModalDemoCtrl">
        <button class="btn btn-default btn-sm" ng-click="open()">open me</button>
    </div>

JS：

app.controller('ModalDemoCtrl', ['$scope', '$modal', function ($scope, $modal) {
    $scope.open = function () {
        var modalInstance = $modal.open({
            templateUrl: 'template.html',
            controller: 'ModalInstanceCtrl', 
            resolve: {}
        });
    };
}]);

app.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', function ($scope, $modalInstance) {
    $scope.ok = function () {
        $modalInstance.close();
    };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
}]);

私は最初に基本を理解しようとしています...それを開くように。私はほとんどリソースを使い果たしたので、どんな助けでも大歓迎です！ありがとう！

javascriptangularjsangular-uiangular-ui-bootstrap
12
awmcreative

問題を修正しました。

どうやら、angular-uiの下にangular-strapがあり、angular-uiを上書きしていたようです。両方のスクリプトは明らかに互いに競合していました。

私が取り組んでいるアプリは複雑なので、見落としがちでした。ただし、アドバイスの言葉は、1つのライブラリに固執し、物事をシンプルに保つことです。

みんな、ありがとう！

21
awmcreative

このエラーは、$ modalの失敗を含めることによって発生します。

確認してください：

  1. あなたのangular.jsとyourapp.jsの間にソースリンクを追加します

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
<script src="assets/js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="assets/js/yourapp.js"></script>

  2. モジュールにui.bootstrapを追加します

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

  3. コントローラに$ modalの独立性を追加します

    app.controller('ModalDemoCtrl', ['$scope', '$modal', function ($scope, $modal) {}]);
5
Chen-Tsu Lin

この問題は、angular-modalとangularjsのバージョンが異なるために発生します。 angular-modalv.0.5で同じ問題に直面し、解決策を得ました。

使用する：

$modal({......});

の代わりに：

$modal.open({......});

例えば：-

 var termAndConModal = $modal({
    title: 'Info',
    controllerAs: 'termAndConModalController',
    template: '../views/partials/term_n_cond_modal.html',//;myModalContent.html',
    show: false
});
$scope.showtermAndConModal = function() {
    termAndConModal.$promise.then(termAndConModal.show);
};
$scope.showtermAndConModal();
5
vineet

Ng-appはどこにありますか？ ui.bootstrapを含むアプリを参照する必要があります。

以下のプランカーを参照してください。

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

それがあり、表示されていない場合は、最新バージョンのAngularを使用することをお勧めします。 1.1.5はかなり古いです。

1
john west