My Code is like this
<div id="palletapp" class="content" ng-app='myApp' ng-controller="MainCtrl" style="display: none">
<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>
</div>
angular.module('myApp', ['angular-loading-bar', 'ui.bootstrap']).controller('MainCtrl', [
'$http', '$scope', '$modal', '$filter', function ($http, $scope, $filter, $modal) {
$scope.open = function(size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function() {
return $scope.items;
}
}
});
}
}
]);
everything looks okay to me. But on button click this throws an error.
TypeError: undefined is not a function. at line
var modalInstance = $modal.open({
I have correctly added Bootstrap-UI reference and all to page. Can any one point out what I am doing wrong?
You are injecting dependencies in wrong order:
'$http', '$scope', '$modal', '$filter', function ($http, $scope, $filter, $modal) {
Note that $modal service is the third one in list.
Related
I have the following angular html in an attempt to open a modal form on clicking a button. The code creates the button just fine but on click it doesn't do anything.
Why is the button not opening the form?
var myMod = angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function() {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
items: function() {
return $scope.items;
}
}
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
var 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');
};
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>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>
<h1>GWAT Websites and Designs</h1>
<button class="btn" ng-click="open()">Submit new post</button>
</div>
I made these changes:
include <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
add ng-app="plunker"
register controllers: myMod.controller('ModalDemoCtrl', ModalDemoCtrl);
myMod.controller('ModalInstanceCtrl', ModalInstanceCtrl);
Add <p>Selected: {{selected}}</p> to view selected item from modal
Change $modal to $uibModal and $modalInstance to $uibModalInstance
var myMod = angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function($scope, $uibModal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function() {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
items: function() {
return $scope.items;
}
}
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
var ModalInstanceCtrl = function($scope, $uibModalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function() {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
};
myMod.controller('ModalDemoCtrl', ModalDemoCtrl);
myMod.controller('ModalInstanceCtrl', ModalInstanceCtrl);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<div ng-app='plunker' ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>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>
<h1>GWAT Websites and Designs</h1>
<p>Selected: {{selected}}</p>
<button class="btn" ng-click="open()">Submit new post</button>
</div>
Forgive me if this error is somewhat simple, but i seem to be getting these injection error and the debugger in firefox doesn't seem to help me.
Here the code snippets
This is the Controller file in question
App.controller('ModalInstanceCtrl', function ($scope,$uibModal, menuAppetizers) {
$scope.menuAppetizers; });
App.controller('AppetizerMenuController',
['$rootScope', '$scope', '$http', 'ParseService', '$location', '$q', '$uibModal',
function ($rootScope, $scope, $http, $location, ParseService, $q, $uibModal) {
//.... needless code not related to the problem
$scope.open = function (_menuAppetizer) {
console.log("We get into the modal open");
var modalInstance = $uibModal.open({
controller: 'ModalInstanceCtrl',
templateUrl: "Views/menu/myModal.html",
resolve: function () {
return _menuAppetizer;
}
});
}
}]);
in the app.js file where i call for ui-bootstrap:
var App = angular.module('App',
['ngRoute', "ui.bootstrap"])
Which seem to look fine to me. This consist most of the routing for my project.
The view for the AppetizersController which only show the modal snippet:
<button type="button" class="btn btn-default btn-sm" ng-click="open(menuAppetizers)"
data-toggle="modal" data-target="#myModal.html">Nutrition Info</button>
Which should go to the modal.html and open that content which is listed here
<div class="modal fade" id="myModal.html" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Nutrition Info</h4>
</div>
<div class="modal-body">
<p>Calories: {{menuAppetizers.NutritionInfo}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Sorry if i didn't post enough code, I can get the modal to work, but when i try to use $modal.open it return a injector error. Did i make a mistake injecting? I looked up this problem and i seem to be following the rules i got from the documentation from ui-bootstrap. Am I missing something? I'm pretty new to angularjs/ui-bootstrap.
Error I get:
Error: [$injector:unpr] http://errors.angularjs.org/1.4.7/$injector/unpr?p0=menuAppetizersProvider%20%3C-%20menuAppetizers%20%3C-%20ModalInstanceCtrl
e/<() angular.min.js:107
Ze/this.$get</<() angular.min.js:80
f/<() angular.min.js:119
lf/this.$get</n.prototype.$eval() angular.min.js:133
lf/this.$get</n.prototype.$digest() angular.min.js:130
lf/this.$get</n.prototype.$apply() angular.min.js:133
h() angular.min.js:87
K() angular.min.js:91
Sf/</z.onload()
There is a mistake in the injection:
App.controller('ModalInstanceCtrl', ['$scope', '$uibModal', 'menuAppetizers',function ($scope,$uibModal, menuAppetizers) {
$scope.menuAppetizers; }]);
App.controller('AppetizerMenuController',
['$rootScope', '$scope', '$http', '$location', 'ParseService', '$q', '$uibModal',
function ($rootScope, $scope, $http, $location, ParseService, $q, $uibModal) {
.... needless code not related to the problem
'ParseService', '$location', ' where inverted.
Your resolve should be:
resolve: {
menuAppetizers: function () {
return _menuAppetizer;
}
}
In your controller, you declared a menuAppetizers dependency, but in your resolve, you did not declare a menuAppetizers object instead you declared a function, that's why it is not working.
I have an Angular application which contains a simple timer that resets on a mousemove event. So far I have been able to handle this by adding the ng-mousemove event to my outer most scope. However, when a Angular Bootstrap Modal appears, it is positioned in the DOM after that scope, so the event gets ignored until the modal is closed.
My current application is structured as follows:
<!DOCTYPE html>
<html ng-app="app">
<head>
...
</head>
<body>
<div data-ng-controller="shell as vm">
<div ng-mousemove="vm.handleMouseMove()">
...
</div>
// MODAL APPEARS DOWN HERE
<div tabindex="-1" role="dialog" class="modal fade ng-isolate-scope warning in" ...>
</div>
</body>
</html>
Is there a way to:
a.) Add the ng-mousemove directive to the modal wrapper
or
b.) Move the modal into my scope, so that shell is a parent to the modal controller.
Not sure why you need that timer reset behaviour but you could do it like this.
Add your shell controller and ng-mousemove to the body-tag and style your body/html to fill the whole page with css width: 100%; height:100%.
Please have a look at the demo below and this jsfiddle.
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('shell', function($scope, $interval, $modal) {
$scope.test = 'hello world';
this.counter = 0;
var vm = this;
this.moveHandler = function() {
console.log('mouse moved, reset counter!');
vm.counter = 0;
};
var timer = function(iterCount) {
console.log('timer tick', vm.counter);
vm.counter++;
};
var intervalPromise = $interval(timer, 100);
$scope.$on("$destroy", function handler() {
// destruction code here
$interval.cancel(intervalPromise); // stop interval on destroy of ctrl.
});
$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;
}
}
});
};
});
// modal code from angular-ui-bootstrap demo
app.controller('ModalDemoCtrl', 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', 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');
};
});
html, body {
width: 100%;
height: 100%;
}
<script src="https://code.angularjs.org/1.3.1/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<body class="wrapper" ng-app="myApp" ng-controller="shell as vm" ng-mousemove="vm.moveHandler()">
<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>
{{test}}
</div>
</body>
I'd like to ask the user to choose among a few possibility but without breaking the style of my page. So I'd like to prompt an alert box or something like that BUT with a dropdown list () in it.
Is it possible?
If so how?
According to the documentation
Official Example
Add angular-bootstrap.js in your project, and 'ui.bootstrap' in your module
in HTML
<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>
JS
var ModalDemoCtrl = 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.
var 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');
};
};
I am integrating the modal from Angular Bootstrap and trying to adapt code sample from here to my app. I get the error: Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance
What do I need to do to make $modalInstance work? I see from code sample that they have written it so that it is within the scope of the function but I am not sure how to write things when chaining controllers.
angular.module('myApp', ['ui.bootstrap']).
controller('ModalInstanceCtrl', function($scope, $modalInstance) {
}).
factory('AuthService', ['$http', '$rootScope', '$modal',
function($http, $rootScope, $modal) {
return {
loginModal: function(callback) {
var modalInstance = $modal.open({
templateUrl: '/partials/main/signin',
controller: 'ModalInstanceCtrl'
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {});
}
};
}
]);
Ok - the issue was actually with my template. I had modified the partial from the sample to be:
<div ng-controller="ModalInstanceCtrl">
<div class="modal-header">
<h3>I am 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>
</div>
While in fact I needed to remove the ng-controller reference.
<div>
<div class="modal-header">
<h3>I am 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>
</div>
I still feel like I am stumbling around with Angular but this seemed to do the trick!
As shown in modal example angular ui, you don't have to specify the ng-controller element. You can specify the controller attribute when defining the modal.
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function () {
return $scope.items;
},
dataModel: function () {
return $scope.data;
}
}
});