$ uibModalInstance undefined (AngularJS UI.Bootstrap)

Question

Why can't $ uibModalInstance be entered here?

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

baseController.$inject = ['$uibModal', '$uibModalInstance']; function baseController($uibModal, $uibModalInstance) { self.ok = function () { $uibModalInstance.close(self.selected.item); }; self.cancel = function () { $uibModalInstance.dismiss('cancel'); }; 

I am trying to access $ uibModalInstance, and if I try to enter it, I get an injection error.

If I do not paste it, then it is Undefined ...

Answer 1

There are so many good statements here, but none of them have solved this problem.

amg-argh got my plkr working with how I configured my injection

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

The biggest magic came from this edit here ...

 var childController = function ($scope, $uibModalInstance) { $scope.ok = function () { $uibModalInstance.close({ my: 'data' }); } $scope.cancel = function () { $uibModalInstance.dismiss(); } } self.open = function (size) { var modalInstance = $uibModal.open({ animation: self.animationsEnabled, templateUrl: 'help.html', controller: childController, size: size }); }; 

+++++++++++++++++++++++++++++++

I also want to note that this MUST be done later as a Service, as well as icfantv . But I need to figure out the syntax for returning and consuming modal promises ...

Thank you all for your help !!

Hooray!

Answer 2

I suspect that the reason for the failure of your code is that you are trying to inject a modal instance into the controller, whose responsibility is to create the modal. He cannot enter it because he does not exist yet. Try using separate controllers: one to open modal and another to handle modal content. You can see an example of this in the Javascript part of our modal example .

TBH, I have never seen the dependencies introduced earlier. Is there some kind of problem that you solve by doing this? Any reason you are not just using:

 angular.module(...).controller('MyController', ['dep1', dep2', ..., MyControllerFunction]); function MyControllerFunction(dep1, dep2) {...} 

Answer 3

There were several errors in your plunk example:

The script loading order is very important:

 <script data-require=" angular.js@1.4.x " src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script> <script src="app.module.js"></script> <script src="childController.js"></script> <script src="baseController.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script> <script src="//angular-ui.imtqy.com/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script> 

This will not work, as app.module.js depends on angular -ui-bootstrap.js, and childController.js depends on angular -animate.js, and childController.js depends on baseController.js. You need to load the scripts in the following order:

 <script data-require=" angular.js@1.4.x " src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script> <script src="//angular-ui.imtqy.com/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script> <script src="app.module.js"></script> <script src="baseController.js"></script> <script src="childController.js"></script> 

In childcontroller.js you have:

 angular .module('app', ['ngAnimate']) 

What is recreating and rewriting an application created in app.module.js. You must enter the ngAnimate module in your app.module.js as follows:

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

You do not need a link to $ uibModalInstance in your base controller:

 var modalInstance = $uibModal.open({ animation: self.animationsEnabled, templateUrl: 'help.html', controller: 'BaseController', size: size }); 

gives you access to the modal that you opened through "var modalInstance", which has closure and reject methods.