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');
    };
}]);

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

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

Убедитесь, что:

добавить ссылку источника между вашими 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>

добавить ui.bootstrap в модуль

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

добавить $modal независимость к вашему контроллеру
```
app.controller('ModalDemoCtrl', ['$scope', '$modal', function ($scope, $modal) {}]);
```

Ответ 3

Эта проблема возникает из-за различной версии angular -modal и угловых символов. Я столкнулся с такой же проблемой в angular -modalv.0.5 и получил решение i.e,

использование:

$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();

Ответ 4

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

См. ниже plunkr.

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

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