Member Avatar for kubiak

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

Member Avatar for kubiak

Do you want example on jsfiddle or plunker?

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?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.