I'm working on an app that uses AngularJS and Bootstrap. I am trying to show and hide a dialog from my controller using Bootstrap UI. For some reason, when I try to open the dialog, I just see a blackened screen. However, the dialog never appears.
My Plunker is here
In that plunker, you can see that I have:
var modalInstance = $modal.open({
templateUrl: 'item-dialog.html',
size: 'sm'
});
modalInstance.result.then(
function (res) {
console.log('here');
},
function (err) {
$log.info('Modal dismissed at: ' + new Date());
}
);
Which looks correct to me. Why is only a black screen appearing? Thank you!
The Bootstrap UI directive just needs the content of your modal as template.
You can simply remove the wrapping tags and it will show as expected:
<div id="scoopModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">...</div></div></div>
var app = angular.module('app', ['ui.bootstrap']);
app.service('myService', ['$http', '$q', function($http, $q) {
this.getOptions = function(prefix) {
return $http.get('http://search.ams.usda.gov/farmersmarkets/v1/data.svc/zipSearch?zip=60629').then(function(response){
console.log(response.data.results);
return response.data.results;
});
};
}]);
app.controller('MyController', ['$scope', '$modal', function ($scope, $modal) {
$scope.query = 'test';
$scope.newItem_Click = function() {
var modalInstance = $modal.open({
templateUrl: 'item-dialog.html',
size: 'sm'
});
modalInstance.result.then(
function (res) {
console.log('here');
},
function (err) {
$log.info('Modal dismissed at: ' + new Date());
}
);
};
$scope.saveItem = function() {
console.log($scope.newItem);
alert('Need to close dialog here.');
};
}]);
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap#3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.2.22" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="MyController">
<h1>Hello Plunker!</h1>
<button class="btn btn-info" data-toggle="modal" ng-click="newItem_Click()">new item</button>
<script type="text/ng-template" id="item-dialog.html">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">New Scoop</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="type">Type</label>
<select id="type" class="form-control" ng-model="newItem.typeId">
<option value="-1">Other</option>
<option value="1">Product</option>
<option value="2">Service</option>
</select>
</div>
<div class="form-group">
<label>Text</label>
<textarea class="form-control" rows="3" ng-model="newItem.data"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" ng-click="saveItem()">Save Scoop</button>
</div>
</script>
</body>
</html>
For closing the modal you can simply add a controller like this:
var modalInstance = $modal.open({
templateUrl: 'item-dialog.html',
size: 'sm',
controller:function($scope, $modalInstance){
$scope.saveItem=function(){
$modalInstance.close();
};
}
});
Related
I want to add model dialog in my project.
My html code is like:
<div ng-controller="bodyController">
<!-- This html would live at the path specified in the controller: path/to/your/modal-template.html -->
<button class="btn" ng-click="open()">Open Modal</button>
<div modal="showModal" close="cancel()">
<div class="modal-header">
<h4>Modal Dialog</h4>
</div>
<div class="modal-body">
<p>Example paragraph with some text.</p>
</div>
<div class="modal-footer">
<button class="btn btn-success" ng-click="ok()">Okay</button>
<button class="btn" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
And My app.js is like this:
var app = angular.module("MyApp", ["ui.bootstrap.modal"]);
app.controller("bodyController", function($scope) {
$scope.open = function() {
$scope.showModal = true;
};
$scope.ok = function() {
$scope.showModal = false;
};
$scope.cancel = function() {
$scope.showModal = false;
};
});
I have added angular UI Bootstrap JS in my index.html file.Still I am not getting model dialog. I am getting an error which i am getting.
My error is like:
Can anyone suggest me how to do resolve this error.
This is an example for bootstrap modal. I think the way you are trying to do where you are not using bootstrap classes
There are quite a few issues in your code, so better try the sample and develop as you need
<button data-toggle="modal" data-target="#test">CLick</button>
<div class="modal fade" id="test" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
Refer below.. This will help you.
var app = angular.module("MyApp", ["ui.bootstrap"]);
app.controller("bodyController", function($scope,$uibModal) {
$scope.open = function() {
var modalInstance = $uibModal.open({
animation:true,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
template: `<div modal="showModal" close="cancel()">
<div class="modal-header">
<h4>Modal Dialog</h4>
</div>
<div class="modal-body">
<p>Example paragraph with some text.</p>
</div>
<div class="modal-footer">
<button class="btn btn-success" ng-click="ok()">Okay</button>
<button class="btn" ng-click="cancel()">Cancel</button>
</div>
</div>`,
size: 'sm',
controller:'modalCtrl',
resolve: {
items: function () {
// return $ctrl.items;
}
}
});
modalInstance.result
.then(function (result) {
console.log('okay');
},
function (result) {
console.log('cancel');
});
};
});
app.controller('modalCtrl', function($scope,$uibModalInstance){
$scope.ok = function() {
$uibModalInstance.close();
};
$scope.cancel = function() {
$uibModalInstance.dismiss();
};
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<body ng-app="MyApp">
<div ng-controller="bodyController">
<!-- This html would live at the path specified in the controller: path/to/your/modal-template.html -->
<button style="margin:20px" class="btn" ng-click="open()">Open Modal</button>
</div>
</body>
I have to write a popup with input text field to be filled inorder to edit the username.When I click the edit button,a popup should be appear with input text field to enter data.The username has to be modified to data whatever I have entered in the input field.How can I implement this by using bootstrap popups in angularjs?
It is quite straightforward to create a popup using angular bootstrap.
Read the documentation. Angular Bootstrap Modal Directive
Below is a simple implementation.
var app = angular.module('plunker', ["ui.bootstrap"]);
app.controller('MainCtrl', function($scope, $uibModal) {
$scope.name = 'World';
$scope.enteredUser = {};
$scope.enteredUser.name = 'not yet entered';
$scope.enteredUser.address = 'not yet entered';
$scope.OpenModal = function(){
var modalInstance = $uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
size: "lg",
controller: 'modalController'
});
modalInstance.result.then(function (user) {
//$ctrl.selected = selectedItem;
$scope.enteredUser = user;
}, function () {
//$log.info('Modal dismissed at: ' + new Date());
});
};
});
app.controller('modalController', function($scope, $uibModalInstance){
$scope.ok = function(){
$uibModalInstance.close($scope.user);
};
$scope.cancel = function(){
$uibModalInstance.dismiss('cancel');
}
});
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="col-sm-12">
<br>
<button class="btn" ng-click="OpenModal()">Enter User Details</button>
<br><br>
<ul class="list-group">
<li class="list-group-item active">User Details</li>
<li class="list-group-item">Name: {{enteredUser.name}}</li>
<li class="list-group-item">Address: {{enteredUser.address}}</li>
</ul>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
<form>
<div class="form-group">
<label for="formGroupExampleInput">Name</label>
<input type="text" class="form-control" id="formGroupExampleInput" ng-model="user.name" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Address</label>
<input type="text" class="form-control" id="formGroupExampleInput2" ng-model="user.address" placeholder="Another input">
</div>
</form>
</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>
</body>
</html>
Question:
I can't find a solution how to get the Datepicker to work, in a modal in Angular. (Please see my code sample below)
Sample Code:
var app = angular.module('demo', ['ui.bootstrap', 'ngAnimate']);
app.controller('MainCtrl', ['$scope', '$uibModal', function($scope, $uibModal){
$scope.open = function () {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl'
});
};
}]);
app.controller('ModalInstanceCtrl', ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) {
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}]);
<!doctype html>
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.1.js"></script>
<script src="example.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div ng-app="demo">
<div ng-controller="MainCtrl" class="container">
<button class="btn btn-default" ng-click="open()">Open Modal</button>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Modal with a DatePicker</h3>
</div>
<div class="modal-body">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="shortDate" ng-model="dt" is-open="opened" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</div>
</script>
</div>
</body>
</html>
I've also created a plunker for the code sample.
You didn't call / implement the date picker directive on the input field. More precisely, the directive notation changed (to uib-) for angular ui-bootstrap during one of the version changes.
Thus the the correct syntax for your version is:
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
Key being to add the uib-datepicker-popup property as stated above.
Running sample:
var app = angular.module('demo', ['ui.bootstrap', 'ngAnimate']);
app.controller('MainCtrl', ['$scope', '$uibModal',
function($scope, $uibModal) {
$scope.open = function() {
$uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl'
});
};
}
]);
app.controller('ModalInstanceCtrl', ['$scope', '$uibModalInstance',
function($scope, $uibModalInstance) {
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
}
]);
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.1.js"></script>
<script src="example.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div ng-app="demo">
<div ng-controller="MainCtrl" class="container">
<button class="btn btn-default" ng-click="open()">Open Modal</button>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Modal with a DatePicker</h3>
</div>
<div class="modal-body">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="shortDate" ng-model="dt" is-open="opened" uib-datepicker-popup />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</div>
</script>
</div>
</body>
</html>
First of all , I m new in angularJS.
And I m using in my first App the following versions :
AngularJs 1.5
Bootstrap 3.3.6
my First AngularJS App is structued like the following :
index.html
----js:app.js
-------controllers:controller.js
-------services:service.js
:angular.js
:angular-route.js
:angular-animate.js
:ui-bootstrap-tpls-1.1.2.min.js
----html:home.html
:header.html
:footer.html
----modal:login.html
:register.html
----css:main.css
in index.html:
**<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<title>my First Angular App</title>
</head>
<body>
<div ng-view class="'slide-animation'"></div>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-animate.js"></script>
<!-- <script src="js/angular-ui-bootstrap.js"></script> -->
<script src="js/ui-bootstrap-tpls-1.1.2.min.js"></script>
<script src="js/app.js"></script>
<!-- <script src="js/service/services.js"></script> -->
<script src="js/controller/controllers.js"></script>
<link href="css\bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="css\mainstyle.css">
</body>
</html>**
app.js :
'use strict';
var app = angular.module('myApp', ['ngRoute','ngAnimate','ui.bootstrap']);
app.config(function($routeProvider){
//console.log($routeProvider);
$routeProvider
.when('/', { templateUrl: 'html/home.html', controller: "HomeCtrl"})
.when('/login', { templateUrl: 'modal/login.html', controller: "LoginCtrl"})
.when('/register', { templateUrl: 'modal/register.html', controller: "RegisterCtrl"})
.otherwise({redirecTo: '/'});
});
controller.js :
'use strict';
app.controller('HomeCtrl', function($scope,$rootScope){
//console.log($scope);
$scope.login=false;
$scope.slogan = "Jump inside AngularJS";
$rootScope.loading=false;
});
app.controller("LoginCtrl", function($scope,$uibModal,$log) {
$scope.open = function (size) {
console.log(size);
var modalInstance = $uibModal.open({
animate: true,
templateUrl: 'html/login.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
$scope.ok = function () {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
/*app.controller("modalAccountFormController", ['$scope', '$uibModal', '$log',
function ($scope, $uibmodal, $log) {
console.log('LoginCtrl');
//$scope.showForm = function (Type) {
// $scope.message = "Show Form Button Clicked:"+Type;
// console.log($scope.message);
var modalInstance = $uibModal.open({
templateUrl: 'modal4.html',
controller: ModalInstanceCtrl,
scope: $scope,
resolve: {
userForm: function () {
return $scope.userForm;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
//};
}]);*/
var ModalInstanceCtrl = function ($scope, $modalInstance, userForm) {
$scope.form = {}
$scope.submitForm = function () {
if ($scope.form.userForm.$valid) {
console.log('user form is in scope');
$modalInstance.close('closed');
} else {
console.log('userform is not in scope');
}
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
app.controller('RegisterCtrl', function($scope,$rootScope) {
console.log('RegisterCtrl');
});
home.html
<div>
<div id="wrapper">
<div class="container-fluid">
<header ng-include="'header.html'" ></header>
<div id="content">
<div class="row main-top-margin text-center">
<div class="col-md-8 col-md-offset-2 " >
<h1 class="animated flash">my First AngularJS App</h1>
<p>{{slogan}}</p>
</div>
</div>
</div>
<footer ng-include="'footer.html'"></footer>
</div>
</div>
</div>
header.html
<!-- Header -->
<div id="header">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<img src="img/headlogo.png" class="img-rectangle" alt="Logo" width="150" height="60">
</div>
<div>
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Info<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-info-sign"></span> About</li>
<li><span class="glyphicon glyphicon-envelope"></span> Contact</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a ng-show="login">Hello</a></li>
<li><span class="glyphicon glyphicon-log-out"></span> Logout</li>
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</div>
And login.html
<div>
<modal title="Login form" visible="showModal">
<form role="form">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" ng-model="email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" ng-model="password"/>
</div>
<button type="button" class="btn btn-default" ng-click="submit()">Submit</button>
</form>
</modal>
</div>
And my problem is : myApp NOT working :-(
And I don't know how to solve or debug it .
Could you please tell first of all on what I have done is it the right way of handling with Angularjs 1.x ?
Second thing , How to solve my issue ?
Thank you .
/Koul
I'm trying to recreate an issue with angular modal but I can't get plunker to work for basic modal. This gives error of index 0, but can't figure out where I should be passing these items from. In the code that I'm using, I don't get this issue. But when I use the same code with Plunker, it throws this error.
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
app.controller('ModalDemoCtrl', ['$scope', '$modal', '$log',
function($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function(size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function() {
return $scope.items;
}
}
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
}
]);
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
app.controller('ModalInstanceCtrl', ['$scope', '$modalInstance',
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');
};
}
]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<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 ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<button class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button class="btn btn-default" ng-click="open('sm')">Small modal</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js"></script>
</body>
</html>
you are missing the items in the
app.controller('ModalInstanceCtrl', ['$scope', '$modalInstance',
'items',
function($scope, $modalInstance, items) {
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
app.controller('ModalDemoCtrl', ['$scope', '$modal', '$log',
function($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function(size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function() {
return $scope.items;
}
}
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
}
]);
app.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', 'items',
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');
};
}
]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<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 ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<button class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button class="btn btn-default" ng-click="open('sm')">Small modal</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
</body>
</html>