current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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)

share|improve this question
1  
Could you provide a plnkr or fiddle? It would be easier to detect the issue. –  denisazevedo Oct 3 at 4:53
    
I just created a plnker, and it works there. So my problem must be elsewhere. Here is the plnker: plnkr.co/edit/TDsrm90lrshcXCZCkQlR. +1 for getting me out of my head. –  Paul Oct 3 at 5:03

2 Answers 2

up vote 0 down vote

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

$scope.open = function() {
    $modal.open({templateUrl:'myModalContent.html'})
};
share|improve this answer
    
I wish I could accept this but I'm still getting the same error message. It's like it doesn't know what $modal is, but I'm sure ui.bootstrap is loading correctly. I'll edit my question to include the full error message. Thanks. –  Paul Oct 3 at 4:43
    
Are you bringing in the angular-ui/bootstrap library? –  DanArl Oct 3 at 4:52
    
I am, it's the first link in my error messages. –  Paul Oct 3 at 5:04
up vote 0 down vote accepted

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.

share|improve this answer
    
Yep, I found an issue like this when I tried to create a plnkr too :) –  denisazevedo Oct 3 at 5:17

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.