angulaire de l'interface utilisateur d'erreur: $modal.ouvert n'est pas une fonction

Je vais essayer d'obtenir un modal à apparaître avec Angular-UI v0.10.0 (http://angular-ui.github.io/bootstrap/) et Angulaire 1.1.5, et je reçois le message d'erreur suivant:

Erreur: $modal.ouvert n'est pas une fonction

Je ne sais pas pourquoi j'obtiens cette erreur. Voici ce que j'ai...

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

Je suis juste essayer d'obtenir les bases de la première...comme d'obtention d'ouvrir. J'ai à peu près m'a épuisé les ressources, de sorte que toute aide serait grandement appréciée! Merci!

OriginalL'auteur awmcreative | 2014-02-14

21

J'ai corrigé le problème.

Apparemment, j'ai eu angulaires-sangle sous angular-ui, qui était d'écraser l'angulaire de l'interface utilisateur. Les deux scripts étaient évidemment en conflit les uns avec les autres.

L'application que je suis en train de travailler sur est compliqué, donc c'était facile à oublier. Toutefois, mot de conseils, d'un bâton d'une bibliothèque et de garder les choses simples.

Merci à tous!

Vous pouvez aussi désactiver certains angulaires-sangle d'articles et de laisser uniquement ceux dont vous avez besoin, en ajoutant les submodules vous avez besoin dans la liste des dépendances, comme var app = angulaire.module('yourApp', [ 'interface utilisateur.routeur', 'ui.bootstrap', 'mgcrea.ngStrap.liste', 'mgcrea.ngStrap.apposer', 'pascalprecht.traduire', 'ngAnimate', 'xeditable', 'restangular', ....

OriginalL'auteur awmcreative
5

Cette cause d'erreur en incluant $modal unsuccess.

Assurez-vous que:
1. ajouter une source de lien entre votre 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. ajouter de l'interface utilisateur.bootstrap pour le module
```
app = angular.module('yourApp', ['ui.bootstrap']); 
```
3. ajouter $modale de l'indépendance de votre contrôleur
```
app.controller('ModalDemoCtrl', ['$scope', '$modal', function ($scope, $modal) {}]);
```
S'il n'avait pas #1 fait, $modal.ouvrir ne serait jamais appelé, donc l'erreur d'être jeté n'arriverait jamais. Et son exemple montre qu'il n' #3.
Merci pour les commentaires. Je crois que j'ai fait ce que vous avez déjà suggéré. J'ai couru dans un problème intéressant. J'ai recréé tout en plunker: plnkr.co/modifier/fUDughjZaWtcd309OUqY?p=preview et tout fonctionne. Mais quand je place le tout dans la vraie application, j'ai encore reçu le message "Erreur: $modal.ouvert n'est pas une fonction d'erreur".

OriginalL'auteur Chen-Tsu Lin
4

Ce problème se produit en raison des différentes version de angulaires-modale et angularjs. J'ai eu face d'un même problème dans angulaires-modalv.0.5 et a obtenu une solution que j'ai.e,

utilisation:
```
$modal({......});
```
Au lieu de:
```
$modal.open({......});
```
Par exemple:-
```
 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();
```
Pouvez vous s'il vous plaît fournir les débarquez avec simaple exemple. erreur '$modal " n'est pas défini. J'ai inclus jquery avant de l'interface utilisateur.bootstrap
assurez-vous que vous devriez inclure angular-modal fichier

OriginalL'auteur vineet
1

Où est votre ng-app? Vous devez avoir une application référencée qui comprend à son tour de l'interface utilisateur.bootstrap.

Voir le plunkr ci-dessous.

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

Si vous en avez et ne se montrait pas, autre chose à faire est d'essayer d'utiliser la dernière version de anguleux. 1.1.5 est assez vieux.

À l'affiche originale, comme pour info, la création d'un plunkr de votre propre serait super simple pour nous de vous montrer ce que vous devez faire différemment.
Veuillez considérer, y compris plus de code dans la réponse.

OriginalL'auteur john west

Vous devez vous connecter pour publier un commentaire.

Cette cause d'erreur en incluant $modal unsuccess.