0

Hi, I am new at angularjs. I use angualarjs ui boostrap modal and i need to show the uibreadcrumb in the modal. I am working on file browsing. I don't see breadcrumb in the modal. Console give me this: Uncaught Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. And here is the code of html:

<!Doctype html>
<html ng-app="myApp">

<head>
    <meta charset="UTF-8">

    <script src="js/angular.js"></script>
    <script src="js/ui-bootstrap-custom-tpls-0.12.0.js"></script>
    <script src="js/angular-ui-router.js"></script>
    <script src="js/uiBreadcrumbs.js"></script>

    <script src="js/userService.js"></script>
    <script src="js/breadcrumb.js"></script>


    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>
<body>

<div class="container">

    <div ng-controller="ModalDemoCtrl" class="full">

        <script type="text/ng-template" id="myModalContent.html">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                        ng-click="cancel()">&times;</button>
                <h3 class="modal-title">Mediabrowser</h3>

            </div>
            <div class="modal-body">


                <p>...</p>

                </div>

                Selected: <b>{{ selected.item }}</b>

            </div>

            <div class="modal-footer">

                <button class="btn btn-primary" ng-click="ok()">OK</button>

            </div>


            </div>

        </script>

        <h2>Browser</h2>
        </br>

        <div class="row">

            <div ng-show="selected">selected file: {{ selected }}</div>
        </div>

        </br>
        <button class="btn btn-default" ng-click="open('lg')">Show dialogue</button>

    </div>
    </br>
</div>


</body>
</html>

breadcrumb.js is here:

angular.module('myApp', ['ui.router', 'angularUtils.directives.uiBreadcrumbs','ui.bootstrap'])

    .config(function ($stateProvider) {
        $stateProvider
            .state('home', {
                url: '^',
                views: {
                    'main@': {
                        templateUrl: 'home.tpl.html'
                    }
                },
                data: {
                    displayName: 'Home'
                }
            })
            .state('home.users', {
                // this is a demonstration of how abstract states can be handled by this
                // directive. See the docs for a detailed explanation.
                abstract: true,
                data: {
                    proxy: 'home.users.list'
                }
            })
            .state('home.users.list', {
                url: 'users/',
                views: {
                    'main@': {
                        templateUrl: 'userList.tpl.html'
                    }
                },
                data: {
                    displayName: 'Users'
                }
            })
            .state('home.users.detail', {
                url: ':id',
                views: {
                    'main@': {
                        templateUrl: 'userDetail.tpl.html',
                        controller: function ($scope, userName) {
                            $scope.userName = userName;
                        }
                    }
                },
                data: {
                    displayName: '{{ userName | uppercase }}'
                },
                resolve: {
                    userName: function ($stateParams, userService) {
                        return userService.getUserName($stateParams.id)
                    },
                    userImage: function ($stateParams, userService) {
                        return userService.getUserImage($stateParams.id)
                    }
                }
            })
            .state('home.users.detail.image', {
                views: {
                    'main@': {
                        templateUrl: 'userImage.tpl.html',
                        controller: function ($scope, $state, userImage) {
                            $scope.src = userImage;
                            $scope.parent = {
                                name: $state.$current.parent.self.name,
                                params: $state.$current.parent.params
                            };
                        }
                    }
                },
                data: {
                    displayName: false
                }

            })

    }).controller('ModalDemoCtrl', function ($scope, $modal, $log) {

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

    $scope.open = function (size) {

        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            windowClass: 'full',
            size: size,
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });

        modalInstance.result.then(function (selectedItem) {
            $scope.selected = selectedItem;
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };
}).controller('ModalInstanceCtrl', 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');
    };
});

here is image: Click Here

Edited by kubiak

2
Contributors
2
Replies
28
Views
2 Years
Discussion Span
Last Post by Taywin
0

Do you want example on jsfiddle or plunker?

0

I am not sure if you could actually define ng-app at the top most level (html tag). It may be used in div tag, but have you tried it in body tag instead?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.