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>
Related
So just to explain, a little bit closer.
I have 3 controllers, each has a different purpose, in ng-route.
But when I ng-include file in the template file, the second controller's ng-repeat is not working,
on the #/footer with a route. But on the #/nemke everything is working fine.
I know it's confusing. Thanks in advance.
#/footer template
<div class="container fluid bigCont" >
<div id="muster">
<span id="left"></span>
<span id="right"></span>
<ul class="slide">
<li id="{{image.id}}" class="slides" ng-repeat="image in images" ng-style="{'background-image': 'url(images/' + image.image + ')'}" >
<div class="absolute">
<h2 class="duka">{{image.text}}</h2>
<p>{{image.text2}}</p>
<button class="main-but" >More</button>
</div>
<span class="closer">X</span>
<span ng-click ="editor()" class="glyphicon glyphicon glyphicon-pencil pencer" aria-hidden="true"></span>
</li>
</ul>
</div>
<div ng-include="'good.html'"></div> the controller for this tempalte doesen't work goodCtrl
#/nemke template
<h1>{{name}}</h1>
<h1 id="number" ng-click="getNumber(1)">0</h1>
<form name="myForm" ng-if="bool" ng-model="formModel">
<input type="text" ng-model="formModel.text" id="text" name="text" required/>
<button ng-disabled="myForm.$invalid" ng-click="addNew()">Add new text</button>
</form>
<button ng-click="boolke=true">Fade in</button>
<button ng-click="boolke=false">Fade Out</button>
<p ng-if="boolke" ng-click="deletRec($event)" class="del_id sade" id="{{user.id}}" ng-repeat = "user in users">{{user.text}}</p>
<p>{{name}}</p>
controller for nemke template
app.controller('goodCtrl', ['$scope','$http','$controller', 'images', function($scope,$http,$controller, images){
$controller('getCtrl',{$scope:$scope});
$scope.name = "Nikson";
document.getElementById('title').style.display = "none";
images.success(function(data){
$scope.users = data;
});
$scope.formModel = {};
$scope.addNew = function() {
$scope.users.push($scope.formModel);
/*$http.post('post.php', $scope.formModel).
success(function(data){
console.log("ok")
}).error(function(data){
console.log("err");
}); */
$scope.formModel = {};
};
$scope.deletRec = function(event) {
var id = event.target.id;
$http({
method: 'DELETE',
url: 'delete.php',
data: {
id: id
},
headers: {
'Content-type': 'application/json;charset=utf-8'
}
})
.then(function(response) {
console.log(response.data);
}, function(rejection) {
console.log(rejection.data);
});
event.target.style.display = "none";
}
$scope.care = [
{
name:"Nemke",
age:12,
},
{
name:"Uros",
age:13,
}
]
}]);
routing js
app.config(function($routeProvider) {
$routeProvider
.when("/",{
controller:"newCtrl",
templateUrl:"main.html",
})
.when("/footer",{
controller: "getCtrl",
templateUrl : "red.html",
})
.when("/nemke",{
controller: "goodCtrl",
templateUrl:"good.html",
})
.otherwise({
redirectTo:"/"
})
});
main js
app.controller('getCtrl',['$scope', '$http', '$routeParams', 'images', function($scope, $http, $routeParams, images) {
images.success(function(data){
console.log(data);
}]);
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>
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.
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;
}
}
});