CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Paul
Paul

Reputation: 1056

Modal Using AngularJS not opening, getting TypeError: undefined is not a function

I'm trying to open a simple modal using Angular. I want it to open from an "About" link in my navbar. Here's the html: 

            <div ng-controller = "ModalDemoCtrl">
            <script type="text/ng-template" id="myModalContent.html">
                <div class="modal-header">
                    <h3 class="modal-title">I am a modal!</h3>
                </div>
                <div class="modal-body">
                    <h1>Welcome to my modal</h1>
                </div>
            </script>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#" ng-click="open()">About</a></li>
            </ul>

        </div>

And here is my Angular code:

var app = angular.module('chucknorris', ['ngRoute', 'ui.bootstrap']);


app.controller('ModalDemoCtrl', ['$scope', '$modal', function($scope, $modal) {

    $scope.open = $modal.open({templateUrl:'myModalContent.html'});
}]);

I'm not trying to process or pass any data into the model, so I think just open should work. I looked at this SO question AngularJS $Modal itself is undefined, but I'm pretty sure I'm including $modal correctly. I just need a modal to open, it was so easy in bootstrap.js. Thanks for any help.

* Edit * Here's the full error message I'm getting: at link (http://youtoocanbechucknorris.com/js/ui-bootstrap.js:8:26380) at U (http://youtoocanbechucknorris.com/js/angularmin.js:48:226) at k (http://youtoocanbechucknorris.com/js/angularmin.js:42:309) at U (http://youtoocanbechucknorris.com/js/angularmin.js:48:167) at k (http://youtoocanbechucknorris.com/js/angularmin.js:42:309) at U (http://youtoocanbechucknorris.com/js/angularmin.js:48:167) at http://youtoocanbechucknorris.com/js/angularmin.js:53:483 at http://youtoocanbechucknorris.com/js/angularmin.js:64:351 at y (http://youtoocanbechucknorris.com/js/angularmin.js:89:187) at y (http://youtoocanbechucknorris.com/js/angularmin.js:89:187)

Upvotes: 0

Views: 3896

Answers (2)

Paul
Paul

Reputation: 1056

My problem was the version of Angular I was using. I was using a copy of Angular I downloaded not 6 months ago. When I downloaded the latest version everything worked. From the docs angular-ui "requires AngularJS 1.2.x, tested with 1.2.16". I was using an early version of 1.2, which I guess didn't cover everything. 1.2.26 works like a charm. Keeping myself up to date would have saved me half a day of work. Lesson learned. Thanks for your help.

Upvotes: 1

DanArl
DanArl

Reputation: 1143

Change $scope.open = $modal.open({templateUrl:'myModalContent.html'}); to

$scope.open = function() {
    $modal.open({templateUrl:'myModalContent.html'})
};

Upvotes: 0

Related Questions