in angularstrap documentation controller can be a function. but there is no example for this ability.
I am using this code for creating and display a modal using angularStrap:
$scope.openCheckDialog = function(){
var checkModal= $modal({title :"test 1",
templateUrl:"temp/checkTemp.html",
show:false,
controller:function(){
console.log("show first log to me!!!");
this.test = function(){
console.log("show other log to me") ;
}
}});
checkModal.$promise.then(checkModal.show) ;
};
and it is my modal template script:
<div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" ng-show="title">
<button type="button" class="close" aria-label="Close" ng-click="$hide()"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" ng-bind="title"></h4>
</div>
<div class="modal-body" ng-bind="content"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
<button type="button" class="btn btn-primary" ng-click="test()">Save</button>
</div>
</div>
</div>
</div>
when I open this dialog first log is shown in console but when I click on save button no thing happen.
How about this?
var checkModal= $modal({
title :"test 1",
templateUrl:"temp/checkTemp.html",
show:false,
controller: ['$scope', function($scope){
$scope.test = function () {
console.log("show other log to me");
};
}]
});
Related
I have this modal here
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Details</h4>
</div>
<div class="modal-body">
<div class="row" ng-repeat="prods in products">
<div class="col-sm-4">
<p>#{{prods.pd }}</p>
</div>
<div class="col-sm-4">
<p>#{{ prods.quantity }}</p>
</div>
<div class="col-sm-4">
<p>#{{ prods.totalline }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
I show my model clicking in a button
<button id="btn-add" class="btn btn-primary btn-sm" ng-click="toggle()"> View Details <i class="fa fa-plus" aria-hidden="true" style="margin-left: 50px; margin-right: 20px"></i></button>
And im trying to display some data.
My controller js is like this
app.controller('productDelivedController', function($scope, $http, API_URL) {
$scope.toggle = function() {
$http.get(API_URL + 'donation/listLines/1')
.success(function(response) {
$scope.products = response;
});
$('#myModal').modal('show');
}});
Probably im doing something wrong but i dont know what, im receiving the data correctly like i was supose to but i just cant update my modal with that data.
Please try the modal show code in success function, you are displaying the dialog, before data loaded.
If you show the modal after the data loaded, then the problem will not happed.
app.controller('productDelivedController', function($scope, $http, API_URL) {
$scope.toggle = function() {
$http.get(API_URL + 'donation/listLines/1')
.success(function(response) {
$scope.products = response;
$('#myModal').modal('show');
});
}});
I'm trying to add a modal popup window to my Angular app. Although it lists down the names, when I click on the names a modal doesn't appear. Below is my code
HTML:
<div ng-app="app">
<div ng-repeat="customer in customers">
<button class="btn btn-default" ng-click="open(customer)">{{ customer.name }}</button> <br />
<!--MODAL WINDOW-->
<script type="text/ng-template" id="myContent.html">
<div class="modal-header">
<h3>The Customer Name is: {{ customer.name }}</h3>
</div>
<div class="modal-body">
This is where the Customer Details Goes<br />
{{ customer.details }}
</div>
<div class="modal-footer">
</div>
</script>
</div>
</div>
JS:
var app = angular.module('app', ['ngRoute','ui.bootstrap']);
app.config(function($routeProvider) {
$routeProvider.
when('/', {controller:testcontroller, templateUrl:'http://localhost/app/index.php/customer/home'}).
otherwise({redirectTo:'/error'});
});
function test2controller ($scope, $modalInstance, customer) {
$scope.customer = customer;
}
function testcontroller ( $scope, $timeout, $modal, $log) {
$scope.customers = [
{
name: 'Ben',
details: 'Some Details for Ben',
},
{
name: 'Donald',
details: 'Some Donald Details',
},
{
name: 'Micky',
details: 'Some Micky Details',
}
];
$scope.open = function (_customer) {
var modalInstance = $modal.open({
controller: "test2controller",
templateUrl: 'myContent.html',
resolve: {
customer: function()
{
return _customer;
}
}
});
};
}
Can someone let me know what am I doing wrong here?
Controller
$scope.saveFeed = function(feed){
$('#exampleModalCenter').modal('show');
console.log(feed);
}
HTML
<a class="dropdown-item p-3" href="#" ng-click="saveFeed(feed.id)">
<div class="d-flex align-items-top">
<div class="icon font-size-20"><i class="ri-save-line"></i>
</div>
<div class="data ml-2">
<h6>Save Post</h6>
<p class="mb-0">Add this to your saved items</p>
</div>
</div>
</a>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I am using the iu.bootstrap.modal popup window on one of my views. The modal windows displays correctly except that it looks like it is inside a larger white frame.
What is causing this white frame to appear behind my modal window?
Here is my view:
<button type="button" id="btnModal" name="modal1" ng-click="openModal()" class="btn btn-primary pull-right">Open Modal</button>
<!--Modal-->
<script type="text/ng-template" id="myModal.html">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
<span id="error-message" class="text-danger" style="white-space:pre">{{message}}</span>
</div>
<div class="modal-footer">
<button id="btn-ok" class="btn btn-primary" type="button" ng-click="ok()">OK</button>
</div>
</div>
</script>
And my controller
$scope.openModal = function () {
var title = "Modal Title";
var message = "Modal Message";
var modalInstance = $uibModal.open ({
animation: true,
templateUrl: 'myModal.html',
size: 'sm',
controller: function ($scope) {
$scope.title = title;
$scope.message = message;
$scope.ok = function () { modalInstance.dismiss() };
}
});
};
What causes the window to appear behind the modal?
In ui.bootstrap documentation (https://angular-ui.github.io/bootstrap/#/modal)
<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">
<ul>
<li ng-repeat="item in $ctrl.items">
{{ item }}
</li>
</ul>
Selected: <b>{{ $ctrl.selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
</div>
</script>
There is not a <div> of modal-content class. But you have at the beginning of the modal. The modal-content is a css Bootstrap class and it may cause the problem.
Iam able to open the modal when i click on get label
how to pass the scope variable 'item' from myCtrl to modal
code for myModal.html
//below is the modal to show when we click on button in main page and display the item value in the modal-body
//when we click on the save changes how to invoke the method
<div class="modal " tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="modal-title ng-binding" ng-bind-html="title">Title</h4>
</div>
<div class="modal-body">
{{item}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
<button type="button" class="btn btn-primary" ng-click="modalClose()">Save changes</button>
</div>
</div>
</div>
</div>
//code main html page
<div ng-app="test">
<div ng-controller="myCtrl">
<label ng-click="openModal()">GET</label>
</div>
</div>
****//code in js****
var app = angular.module('test', []);
app.controller('myCtrl',[ui.bootstrap], function($scope,$modal) {
$scope.item= "welcome....";
$scope.openModal= function(){
var myModal = $modal({ title: 'My Title', template: 'modalEx.html', show: true });
myModal.$promise.then(myModal.show);
}
});
You need to add a resolve and controller field in modal config. For example:
resolve: {
items: function () {
return $scope.items;
}
},
controller: 'ModalInstanceCtrl'
and in your modal controller:
controller('ModalInstanceCtrl', function ($scope, $modalInstance, items)
You have items on items varible.
I have modal invoked with just HTML tags:
<button class="btn btn-xs stop" data-template-url="template/modal.html"
bs-modal="modal">
</button>
but after that I can only close my modal with "Close" button, not "Save changes".
This is my external modal template:
<div class="modal" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document" ng-controller="modalController">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="task_id"> Task #{{clickedStop}}</h4>
</div>
<div class="modal-body">
<textarea id="description" class="form-control" placeholder="Description of work on a task"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
<button type="button" class="btn btn-primary" ng-click="saveModal()">Save changes</button>
</div>
</div>
</div>
and my modalController:
app.controller('modalController', function($scope, $rootScope){
$scope.saveModal = function (){
$scope.ticket_id = $rootScope.clickedStop;
var tickets = localStorage.getItem($scope.ticket_id);
var task = JSON.parse(tickets);
$scope.description = jQuery("#description").val();
if($scope.description == "" || $scope.description == undefined)
{
alert("You must enter description!");
return;
};
var save = JSON.stringify({
":task_id":$scope.ticket_id,
":creator":task.creator,
":date_created":task.start,
":owner":task.owner,
":title":task.title,
":description":$scope.description
});
jQuery.ajax({
url:"engine/saveActivity.php",
method: "POST",
data:{data:save},
dataType:'json'
})
.success(function (responce){
if (responce === true){
console.log("Activity saved!");
//I wont to close modal here
}
}).error(function(data){
console.log("Error Activity save!"+ data);
});
};
When I tried to use $hide(), I get an error that $hide is not a function.
$hide() does not work because you not have included the $modal service :
app.controller('modalController', function($scope, $rootScope, $modal) {
^^^^^^
Now ng-click="$hide()" will work as expected. As the docs points out :
Append a bs-modal attribute to any element to activate the directive.
The module also exposes a $modal service Available for programmatic use
(inside a directive/controller).
But you must include it in order to use it.