2015-12-24 5 views
14

Ich versuche $ uibModal in mein Projekt zu injizieren, aber wenn die Steuerung geladen wird, ich die folgende Fehlermeldung erhalten:

Error: [$injector:unpr] Unknown provider: $uibModalProvider <- $uibModal <- abilityListController 

I NuGet für mein Paket-Management-bin mit.

AngularJS: 1.4.8

Bootstrap: 3.3.6

Angular-Ui-Bootstrap: 0.14.3

Hier ist der relevante Code:

Index.HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <link href="Content/bootstrap.css" rel="stylesheet" /> 
    <script src="scripts/angular.js"></script> 
    <script src="scripts/angular-ui/ui-bootstrap.js"></script> 
    <script src="app/app.js"></script> 
    <script src="app/homeController.js"></script> 
    <script src="app/abilityList/abilityListController.js"></script> 
</head> 
<body> 
    <div ng-app="tecApp"> 
     <div ng-controller="homeController as vm"> 
      </div> 
      <div ng-controller="abilityListController as vm" ng-if="true"> 
       <div ng-include="'app/abilityList/abilityList.html'"></div> 
      </div> 
     </div> 
    </div> 
</body> 
</html> 

app.js:

angular.module("tecApp", []); 

AbilityListController.js:

angular 
    .module('tecApp') 
    .controller('abilityListController', AbilityListController); 

AbilityListController.$inject = ['$uibModal']; 

function AbilityListController($uibModal) { 
    var vm = {}; 
    return vm; 
} 

Ich glaube, ich bin falsch Injektion, aber es könnte mit dem zu tun hat, wie ich meine Quelldateien enthalten habe.

Ich bekomme keine Konsolenfehler abgesehen von dem oben genannten.

Ich bevorzuge diese Syntax für meinen eckigen Code, also hoffe ich auf eine Korrektur zu meinem Code statt ('controllername', ['$ stuff', 'moreStuff']).

Vielen Dank im Voraus für jede Hilfe.

Antwort

24

Sie sollten abhängiges Modul injizieren, bevor Sie es verwenden. Der Code sollte so aussehen:

angular 
    .module('tecApp',['ui.bootstrap']) 
2

Inject ui.bootstrap Modul in dem Anwendungsmodul:

angular.module("tecApp", ["ui.bootstrap"]) 

Sie können auch $modal verwenden (und vielleicht auch seine noch besser) Service von ui.bootstrap Modul statt $uibModal

+3

Danke! Zuletzt habe ich gehört, $ modal wird von ui-bootstrap abgelehnt und sie bevorzugen die Verwendung von $ uibModal. Ich bin sicher, dass es einige Unterschiede gibt, aber sie scheinen identisch zu funktionieren. – KoalaFanatic

+0

ja, definitiv – Andrew

+0

Das löste mein Problem. Ich benutze angular 1.4.9 und angular-ui-bootstrap 1.3.2 und auf der offiziellen Seite (https: //angular-ui.github.io/bootstrap /) Sie schreiben, dass Sie $ uibModal verwenden müssen, aber das hat nicht für mich funktioniert. – bonbon

8

Ich habe heute 3 Stunden verloren, um herauszufinden, dass "angular-bootstrap": "0.12.2" jetzt "angular-ui-bootstrap" sein sollte: "1.1.2" in Ihrem Paket json.

Ich konnte nicht verstehen, warum Version 1.1.2 nicht in Winkel Bootstrap ... jetzt

gefunden wurde Es wirkt wie ein Zauber!

Hoffe es hilft ... :)

+3

https://github.com/angular-ui/bootstrap sagt: "installiere angular-ui-bootstrap nicht. Ein separates Repository - bootstrap-bower - hostet die kompilierte Javascript-Datei und bower.json." – Komo

0

Es funktionierte für mich. Ich hatte angularJS Version 1.2.16. Die kompatible Version von ui-bootstrap ist 0.12.0. Sie müssen die kompatible Version immer googeln, bevor Sie sie verwenden.

Verwandte Themen