Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular-ui modal issue

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:screen shot of the issue

Any idea what could be causing this?

like image 695
bornytm Avatar asked Jan 13 '23 09:01

bornytm


2 Answers

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.

like image 132
Chandermani Avatar answered Jan 16 '23 14:01

Chandermani


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,

like image 35
Maxim Shoustin Avatar answered Jan 16 '23 13:01

Maxim Shoustin