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()">×</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
