Angular UI: Unknown provider: dialogProvider

Question

I am trying to replicate the following Angular UI example of a simple dialog with a close-button. https://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md. However, I cannot get the dialog parameter to be injected properly into my dialog controller.

The controllers looks like below (using CoffeScript)

angular.module('myApp', ['ui.bootstrap'])

angular.module('myApp').controller 'MyController', ($dialog, $scope) ->
  $dialog.dialog().open('dialogTemplate', 'DialogController')

angular.module('myApp').controller 'DialogController', ['$scope', 'dialog', ($scope, dialog) ->
    $scope.close = -> dialog.close()
]

See the Plunker for a live version: http://plnkr.co/edit/ejKh7w8Sk9H7Nz3rXhdc?p=preview

Angular gives me the following error:

Unknown provider: dialogProvider <- dialog

Any ideas on how the dialog-parameter could be injected into DialogController, as is seen in the docs example referred to above? I suspect this could have something to do with CoffeeScript since I am fairly new to this language, but it seems quite right when I look at the compiled output.

Kristofer Sommestad · Accepted Answer · 2013-06-13T20:05:26.277

18

I had a similar problem and was struggling to find a solution.

I was expecting two additional arguments to my controller; ..., selectedView, dialog). It seemed to provide my dialog with the right arguments, but I still got an error in the console.

The problem was that I was referencing the controller twice;

When opening my dialog: dialog.open('template', 'myController')
In my template file: section(ng-controller='myController')

Removing (2) resolved the problem, since that wasn't invoked by the dialog code, which provided my selectedView argument and the default dialog argument.

Hope that helps someone.

edited Jun 13 '13 at 20:05

answered Jun 13 '13 at 19:09

Kristofer Sommestad

3,061
27
39

1

not sure why you got downvoted - this is the correct answer. Reto's answer is incorrect. – mackmack Jun 15 '13 at 05:40
Incredibly useful. Thanks a lot! – Hagen Jul 02 '13 at 09:40

score 0 · Answer 2 · answered May 28 '13 at 20:56

0

The dialog provider is named $dialog (s. dialog.js). So you have to name the injected value $dialog like you did correctly in MyController.

angular.module('myApp').controller 'DialogController', ['$scope', '$dialog', ($scope, $dialog) ->
  $scope.close = -> dialog.close()
]

→ Plunker

Note: As you define your dependencies as strings the controller arguments can be named as you like:

... ['$scope', '$dialog', (myscope, mydialog) -> ...

answered May 28 '13 at 20:56

Reto Aebersold

16,306
5
55
74

1

this is not correct. $dialog is the angular ui injector, dialog is the singleton object of the current dialog. ['$scope', '$dialog', (myscope, mydialog) doesn't make sense either because this construction is used only to avoid minification problems. see Kristofer's answer for possible solution. – mackmack Jun 15 '13 at 05:42

score 0 · Answer 3 · answered Dec 01 '14 at 06:17

0

Kristofer Sommestad is right here. but i got the same problem.problem was some older version of ui-bootstrap-tpls(like version 0.11.0) does not support $dialog.so used new version of ui-bootstrap-tpls.

answered Dec 01 '14 at 06:17

Mukund Kumar

21,413
18
59
79

Angular UI: Unknown provider: dialogProvider

3 Answers3