Using ui-bootstrap modal

Question

I am using angular ui-bootsrap modal from here

When I click on the Open me button I get nothing. The popup doesn't show. My code can be found below.

app.js

(function () {

        'use strict';
        angular.module('probaApp', ['ui.router','ngAnimate','ui.bootstrap','ui.bootstrap.modal'])
            .config(function ($stateProvider, $urlRouterProvider) {

                $urlRouterProvider.otherwise("/home");

                $stateProvider
                    .state('home', {
                        url: '/home',
                        templateUrl: 'src/home.tpl.html',
                        controller: 'modalController'
                    })

            });
    })();

index.html

<!DOCTYPE html>
<html lang="en" ng-app="probaApp">
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <title></title>
</head>
<body>

<ui-view></ui-view>

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="src/app.js"></script>
<script src="src/modal-controller.js"></script>
<script src="src/modal-instance-controller.js"></script>

</body>
</html>

modal-controller.js

     (function () {
    'use strict';

    function ModalController($scope,$modal,$log) {

        $scope.modalController = {};

        $scope.modalController.items = ['item1', 'item2', 'item3'];

        $scope.modalController.animationsEnabled = true;

        $scope.modalController.open = function(size){

            $scope.modalController.modalInstance = $modal.open({
                animation: $scope.animationsEnabled,
                templateUrl: 'myModalContent.html',
                controller: 'modalInstanceController',
                size: size,
                resolve: {
                    items: function () {
                        return $scope.modalController.items;
                    }
                }
            });

          $scope.modalController.result.then(function (selectedItem){
              $scope.modalController.selected = selectedItem;
          },function(){
              $log.info("Modal dismissed at: " + new Date());
          });

        };

        $scope.modalController.toggleAnimation = function(){
            $scope.modalController.animationsEnabled = !$scope.modalController.animationsEnabled;
        };


    }

    angular.module('probaApp').controller('modalController', ModalController);
})();

Modal-Instance-Controller

/**
 * Created by user on 19.09.2015.
 */
(function(){

    function ModalInstanceController ($scope,$modalInstance,items){

        $scope.modalInstanceController = {};

        $scope.modalInstanceController.items = items;
        $scope.modalInstanceController.selected = {
            item: $scope.items[0]
        };

        $scope.modalInstanceController.ok = function(){
            $modalInstance.close($scope.modalInstanceController.selected.item);
        };

        $scope.cancel = function(){
            $modalInstance.dismiss('cancel');
        }
    }

    angular.module('probaApp').controller('modalInstanceController',ModalInstanceController);
})();

home.tpl

<div>
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button type="button" class="btn btn-default" ng-click="modalController.open()">Open me!</button>
</div>

EDIT for mad

TypeError: Cannot read property 'then' of undefined
    at Object.ModalController.$scope.modalController.open (http://localhost:63342/Proba/src/modal-controller.js:26:42)
    at fn (eval at <anonymous> (http://localhost:63342/Proba/bower_components/angular/angular.js:13275:15), <anonymous>:4:293)
    at callback (http://localhost:63342/Proba/bower_components/angular/angular.js:23481:17)
    at Scope.$eval (http://localhost:63342/Proba/bower_components/angular/angular.js:15922:28)
    at Scope.$apply (http://localhost:63342/Proba/bower_components/angular/angular.js:16022:25)
    at HTMLButtonElement.<anonymous> (http://localhost:63342/Proba/bower_components/angular/angular.js:23486:23)
    at HTMLButtonElement.eventHandler (http://localhost:63342/Proba/bower_components/angular/angular.js:3296:21)(anonymous function) @ angular.js:12450(anonymous function) @ angular.js:9237Scope.$apply @ angular.js:16027(anonymous function) @ angular.js:23486eventHandler @ angular.js:3296
angular.js:12450 TypeError: Cannot read property '0' of undefined
    at new ModalInstanceController (modal-instance-controller.js:12)
    at invoke (angular.js:4476)
    at Object.instantiate (angular.js:4484)
    at angular.js:9142
    at resolveSuccess (ui-bootstrap-tpls.js:2983)
    at processQueue (angular.js:14678)
    at angular.js:14694
    at Scope.$eval (angular.js:15922)
    at Scope.$digest (angular.js:15733)
    at Scope.$apply (angular.js:16030)

$scope.modalController doesn't have a property "result", $scope.modalController.modalInstance has a property "result". That's why you get that error. — o4ohel
– o4ohel, Commented Sep 18, 2015 at 23:46
tnx man first error is gone, but second error: TypeError: Cannot read property '0' of undefined is still there... — Micko
– Micko, Commented Sep 18, 2015 at 23:53

o4ohel · Accepted Answer · 2015-09-18 23:44:40Z

1

It's because you are doing "$scope.modalController.result..." which doesn't exist. You need to do "$scope.modalController.modalInstance.result.then..."

Also, I'm not sure why you are introducing the "modalController" scope variable? It is not needed and just adds confusion.

answered Sep 18, 2015 at 23:44

o4ohel

1,78913 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Micko Over a year ago

tnx man first error is gone, but second error: TypeError: Cannot read property '0' of undefined is still there...

o4ohel Over a year ago

I've not had the need, but there are a few examples out there ... here's one: embed.plnkr.co/8CHoiN/preview

Max · Accepted Answer · 2015-09-18 23:28:31Z

0

I'm having a similar issue with a modal. I think it's a css problem, and even related to the z-index thing. I wonder if there is some css property from bootstrap library that is hidding the parent element.

answered Sep 18, 2015 at 23:28

Max

211 silver badge7 bronze badges

Comments

mad · Accepted Answer · 2015-09-18 23:57:07Z

0

So in general the modal doesn't open for many reasons. Like o4ohel said the missing property "result". Then you need to give a size. I prefer to comment the critical things and try to open just a blank modal saying"hello". Once you reach it you go further

answered Sep 18, 2015 at 23:57

mad

12 bronze badges

Comments

Micko · Accepted Answer · 2015-09-19 00:09:32Z

0

Okay so i found the mistakes. First one was: $scope.modalController.result == > $scope.modalController.modalInstance.result Second one was: item: $scope.items[0]item: $scope.modalInstanceController.items[0].

As o4ohel said maybe i shouldn't use var modalController ....

answered Sep 19, 2015 at 0:09

Micko

44110 silver badges29 bronze badges

Collectives™ on Stack Overflow

Using ui-bootstrap modal

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related