угловая ошибка пользовательского интерфейса: $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');
    };
}]);

Я просто пытаюсь сначала разобраться с основами... например, заставить его открыться. Я в значительной степени исчерпал свои ресурсы, поэтому любая помощь будет принята с благодарностью! Спасибо!


javascript angularjs angular-ui-bootstrap angular-ui
person awmcreative    schedule 14.02.2014    source источник

Ответы (4)


arrow_upward
22
arrow_downward

Я исправил проблему.

По-видимому, у меня был angular-strap под angular-ui, который перезаписывал angular-ui. Оба сценария явно противоречили друг другу.

Приложение, над которым я работаю, сложное, поэтому его было легко не заметить. Тем не менее, совет: придерживайтесь одной библиотеки и не усложняйте.

Спасибо всем!

person awmcreative    schedule 17.02.2014
comment
Вы также можете отключить некоторые элементы angular-strap и разрешить только те, которые вам нужны, добавив нужные подмодули в список зависимостей, например var app = angular.module('yourApp', [ 'ui.router', 'ui.bootstrap ', 'mgcrea.ngStrap.popover', 'mgcrea.ngStrap.affix', 'pascalprecht.translate', 'ngAnimate', 'xeditable', 'restangular', .... - person Diego Pamio; 22.12.2015

arrow_upward
5
arrow_downward

Эта ошибка возникает из-за включения $modal unsuccess.

Убеждаться:

  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) {}]);
person Chen-Tsu Lin    schedule 14.02.2014
comment
Если бы он не сделал # 1, $modal.open никогда не вызывался бы, поэтому конкретная ошибка никогда не произошла бы. И его пример показывает, что он сделал № 3. - person john west; 15.02.2014
comment
Спасибо за ответ. Я считаю, что уже сделал то, что вы предложили. Я столкнулся с очень интересной проблемой. Я воссоздал все в plunker: plnkr.co/edit/fUDughjZaWtcd309OUqY?p=preview и все работает. Но когда я помещаю все в реальное приложение, я все равно получаю сообщение об ошибке: $modal.open не является ошибкой функции. - person awmcreative; 18.02.2014

arrow_upward
5
arrow_downward

Эта проблема возникает из-за разных версий 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();
person vineet    schedule 10.09.2015
comment
Не могли бы вы предоставить plunk с простым примером. ошибка '$modal' не определена. Я включил jquery перед ui.bootstrap - person user2323308; 05.11.2015
comment
убедитесь, что вы должны включить angular-modal файл - person vineet; 05.11.2015

arrow_upward
1
arrow_downward

Где ваше ng-приложение? Вы должны иметь ссылку на приложение, которое, в свою очередь, включает ui.bootstrap.

См. Планкр ниже.

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

Если у вас это есть и вы просто не показываете это, попробуйте использовать последнюю версию angular. 1.1.5 довольно старая.

person john west    schedule 14.02.2014
comment
К вашему сведению, для оригинального постера создание собственного plunkr упростило бы нам задачу показать вам, что вам нужно делать по-другому. - person john west; 15.02.2014
comment
Пожалуйста, рассмотрите возможность включения большего количества кода в ответ. - person Benjamin Gruenbaum; 16.02.2014