Angulaire Modal Bootstrap: Inconnu fournisseur de: $modalInstanceProvider

Je suis en train d'utiliser l'angle d'Amorçage Modal de la directive (http://angular-ui.github.io/bootstrap/) comme suit, dans mon contrôleur pour ouvrir l'modal:

function customerSearch() {
    var modalInstance = $modal.open({
        templateUrl: 'app/customer/customers.modal.html',
        controller: 'customers.modal'
    });

    modalInstance.result.then(function(selectedCustomer) {
        console.log(selectedCustomer);
    });
}

Modale contrôleur:

var controllerId = 'customers.modal';

angular.module('app').controller(controllerId,
    ['$modalInstance', customersModal]);

function customersModal($modalInstance) {
    //Modal controller stuff
}

Mais quand je le fais, j'obtiens l'erreur suivante:

Unknown provider: $modalInstanceProvider <- $modalInstance

Si je sors $modalInstance, il fonctionne, mais évidemment je n'ai aucune référence à la modale dans l'appel de contrôleur..

Modifier

Je ne sais pas si il vaut la peine de noter, mais je suis en utilisant le Contrôleur de syntaxe:

<div class="container-fluid" data-ng-controller="customers.modal as vm">

Les dépendances de l'Application:

var app = angular.module('app', [
    //Angular modules 
    'ngAnimate',        //animations
    'ngRoute',          //routing
    'ngSanitize',       //sanitizes html bindings (ex: sidebar.js)

    //Custom modules 
    'common',           //common functions, logger, spinner
    'common.bootstrap', //bootstrap dialog wrapper functions

    //3rd Party Modules
    'ui.bootstrap',      //ui-bootstrap (ex: carousel, pagination, dialog)
    'breeze.directives', //breeze validation directive (zValidate)
]);

J'ai créé un plunker qui montre le problème ici: http://plnkr.co/edit/u8MSSegOnUQgsA36SMhg?p=preview

  • Ont créé une coutume directive ou utilisé le angular-ui.github.io/bootstrap les directives
  • Désolé, j'ai oublié de mentionner que je suis sur que l'on trouve à cette url: angular-ui.github.io/bootstrap
  • Ok vous avez une drôle de façon de déclarer le contrôleur en 3 étapes. peut gâcher la résolution de nom si angulaire est tyring de trouver la fonction.
  • pouvez-vous montrer où vous déclarez votre module de dépendances?
  • Je le trouve plus facile à gérer et effectuer les opérations d'exploitation forestière de cette façon
  • J'ai édité ma question pour afficher les dépendances
  • En regardant les plunkr sur le site principal de la dépendance est function ($scope, $modal, $log), c'est $modal pas $modalInstance
  • C'est le contrôleur qui est de l'appel de la modale. Le modal contrôleur a $modalInstance comme une dépendance
  • Pourriez-vous essayer de préparer un débarquez avec un minimum de reproduire le scénario?

InformationsquelleAutor CallumVass | 2014-01-09
  1. 93

    Le problème est que vous avez été la spécification d'un contrôleur à 2 endroits lors de l'ouverture d'un modal et à l'intérieur d'un modèle - ce n'est pas nécessaire. Supprimer ng-controller à partir d'un modèle et tout fonctionne comme prévu:
    http://plnkr.co/edit/khySg1gJjqz1Qv4g4cS5?p=preview

    • Que faire si je veux utiliser le contrôleur de la syntaxe et de la suppression de contrôleur de la forme $modal.open()?
    • Vous pouvez utiliser le contrôleur de syntaxe lors de l'ouverture d'un modal, comme indiqué dans le plunker. Mais $modalInstance va être injecté uniquement aux contrôleurs passé à la open méthode.
    • Il n'y a pas moyen de passer en $modalInstance lors de l'utilisation de contrôleur comme à l'époque? Il me semble avoir des problèmes de laquelle ma vm n'est pas de mise à jour: plnkr.co/modifier/T4E38CmFqy9vsCtYurS7?p=preview
    • Je ne suis pas sûr de ce que vous essayez de faire de exactement, mais peut-être que ce plunker vous aider? plnkr.co/modifier/OmWNr45yquoEMfq19HCg?p=preview - btw - il n'y a pas de ng-foreach - vous besoin d'utiliser ng-repeat.
    • - Je supprimer le ng-controller et il fonctionne pour moi. Mais maintenant, je suis confus. Cette plunker code de l'angle de directives bootstrap fonctionne et il ont ng-controller dans le code html. Voir ici
    • Génial!!! Merci beaucoup pour sauver ma tête 😉

    InformationsquelleAutor pkozlowski.opensource
  2. 1

    essayer cette syntaxe première

    angular.module('app').controller('customers.modal',
    ['$modalInstance', function($modalInstance){
//Modal controller stuff
}]);

    Je pense qu'il se foiré si vous utilisez le support de la notation et de déclarer le contrôleur de l'extérieur.

    $modalInstance est le modalInstance vous de créer il y

    var modalInstance = $modal.open({
        templateUrl: 'app/customer/customers.modal.html',
        controller: 'customers.modal'
    });

    c'est vraiment le même objet. Il se injectés dans le contrôleur, mais ce n'est pas un service/de l'usine. Afin de ne pas avoir un Fournisseur.

    C'est une partie délicate de la lib. N'hésitez pas à demander à l'auteur original de l'interface utilisateur-bootstrap. Ils ont été utile pour expliquer cela.

    • Nope, j'obtiens le même message d'erreur
    • ok je n'avais pas remarqué le modèle de la partie. <div class="container-fluid" data-ng-controller="les clients.modal comme une machine virtuelle"> charge le contrôleur peut-être deux fois?
    • vraiment, vous devez envoyer un minimum de plunker, sinon nous sommes tous des coup de poignard dans le noir...
    • J'ai créé un plunker ici: plnkr.co/modifier/u8MSSegOnUQgsA36SMhg?p=preview
    InformationsquelleAutor mahery rafara