Angular-ui modal issue

Question

I'm trying to include an angular-ui modal in my web application but am having issues with getting everything set up.

The documentation indicate that you can use $modalInstance to inject the child controller into the parent controller but I don't quite understand how to go about doing so.

Here is the current code (it is straight 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 run the app like it is now and click the button to open the modal (addTerm function) the app crashes with the error "ReferenceError: newTerms is not defined."

As I mentioned above, the angular-ui site indicates you can inject a controller with $modalInstance but I have not been able to figure out how. a Any help would be greatly appreciated!

EDIT

After adding the quotation marks on the pathname as suggested by Chandermani, it seems the modal is loading in the current page rather than the specified template.

I've 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;
                }
            }
        });

A screenshot of the issue follows:

Any idea what could be causing this?

Answer 1

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

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

So something like this

controller: 'newTerms',

should work.

Answer 2

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

My previous configuration was:

opens dialogs but dialog content is main HTML (like on your pic)

$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: {}
        };

Sounds like if you put wrong templateUrl, it by default uses main page HTML.

Be sure that you have right path for templateUrl

Hope it will help,

Answer 3

Have you tried to declare a dependency of 'ui.bootstrap' module? Like this:

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

Answer 4

Happened to me today, too. The templateUrl in the controller must match the id for the modal in the html file.

Answer 5

You need to define the newTerms controller before your other controller. Or you can change the code and just create a function inside your main controller with the name newTerms and remove the quotation marks for the name of your controller in your modal.

$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');
};
}