Angular -ui modal problem

Question

I am trying to incorporate angular -ui modal in my web application, but I am having setup problems.

The documentation states that you can use $ modalInstance to enter the child controller into the parent controller, but I do not quite understand how to do this.

Here is the current code (directly from the modal demo from the documentation):

angular.module('myApp.controllers', []). controller('addContent', function ($scope, $http, $modal, $log){ //modaltest $scope.items = ['item1', 'item2', 'item3']; $scope.addTerm = function () { var newTerm = $modal.open({ templateUrl: 'newTermModal.jade', controller: newTerms, resolve: { items: function () { return $scope.items; } } }); newTerm.result.then(function (selectedItem) { $scope.selected = selectedItem; }, function () { $log.info('Modal dismissed at: ' + new Date()); }); }; }). controller("newTerms",function($scope, $modalInstance, items){ $scope.items = items; $scope.selected = { item: $scope.items[0] }; $scope.ok = function () { $modalInstance.close($scope.selected.item); }; $scope.cancel = function () { $modalInstance.dismiss('cancel'); }; }); 

When I launch the application as it is now and press the button to open the modal function (addTerm), the application crashes with the error "ReferenceError: newTerms not defined".

As I mentioned above, the angular -ui site indicates that you can enter the controller using $ modalInstance, but I could not figure out how to do this. Any help would be greatly appreciated!

EDIT

After adding quotes in the path suggested by Chandermani, it seems that the modal loading is on the current page, and not in the specified template.

I changed the path to the following: templateUrl:

  $scope.addTerm = function () { var newTerm = $modal.open({ templateUrl: './views/partials/newTermModal.jade', controller: 'newTerms', resolve: { items: function () { return $scope.items; } } }); 

Below is a screenshot:

Any idea what could be causing this?

Answer 1

Well, you can pass the controller as a string value. I took the default demo for the modal and changed it to pass the name of the controller instead of the controller itself.

See my plunker http://plnkr.co/edit/jpJX4WvHw0SSYm3pAAzq?p=preview

So something like this

controller: 'newTerms',

must work.

Answer 2

I have the same problem, modal loads the main HTML file, but not the template.

My previous configuration was:

opens dialog boxes, but the contents of the dialog box are the main HTML (for example, in your picture)

 $scope.opts = { backdrop: true, backdropClick: true, dialogFade: false, keyboard: true, templateUrl : 'app/reports/modalContent.html', controller : 'ModalInstanceCtrl', resolve: {} }; 

works as expected

 $scope.opts = { backdrop: true, backdropClick: true, dialogFade: false, keyboard: true, templateUrl : '/app/reports/modalContent.html', controller : 'ModalInstanceCtrl', resolve: {} }; 

It looks like if you placed the wrong templateUrl , it uses the main page HTML by default.

Make sure you have the correct path for templateUrl

Hope this helps,

Answer 3

Have you tried declaring the dependency of the module 'ui.bootstrap' ? Like this:

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

Answer 4

It happened today. The Url pattern in the controller must match the identifier for the html modal file.

Answer 5

You need to define a newTerms controller in front of another controller. Or you can change the code and simply create a function inside your main controller named newTerms and remove the quotes for the name of your controller in your modal format.

 $scope.addTerm = function () { var newTerm = $modal.open({ templateUrl: './views/partials/newTermModal.jade', controller: newTerms, resolve: { items: function () { return $scope.items; } } }); var newTerms = function($scope, $modalInstance, items){ $scope.items = items; $scope.selected = { item: $scope.items[0] }; $scope.ok = function () { $modalInstance.close($scope.selected.item); }; $scope.cancel = function () { $modalInstance.dismiss('cancel'); }; }