The question is: How to call popup page from AngularJS side?
Currently I have popup page shown on anchor HREF click in HTML like this:
1) the HTML part is following:
<modal lolo="modal1" modal-body="body" modal-footer="footer" modal-header="header" template-url="contactus"></modal>
CONTACT
2) the directives created in AngularJS side:
(function(angular) {
angular.module("app")
.directive('modal', function() {
return {
restrict : 'EA',
scope : {
title : '=modalTitle',
header : '=modalHeader',
body : '=modalBody',
footer : '=modalFooter',
callbackbuttonleft : '&ngClickLeftButton',
callbackbuttonright : '&ngClickRightButton',
handler : '=lolo'
},
templateUrl : function(elem, attrs) {
if (attrs) {
if (attrs.templateUrl === 'sendverify') {
return "./pages/register/sendverificationcode.html";
} else if (attrs.templateUrl === 'contactus') {
return "./pages/contact/contact_us.html";
}
}
},
transclude : true,
controller : function($scope, $attrs) {
$scope.handler = $attrs.templateUrl;
},
};
})
}(angular));
3) And contact_us.html :
<div id="{{handler}}" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" aria-hidden="true">×</button>
<h4 class="modal-title">
<h2>{{header}}</h2>
</h4>
</div>
<div class="modal-body">
<div>
<p>
<b>HAVE A QUESTION OR COMMENT? NEED HELP?</b>
</p>
</div>
<div>
<p>How can we be of service? For answers to all your questions, call us. We 're happy to help. Or, send us an email below and we 'll get back to you as soon as we can.</p>
</div>
</div>
<div class="modal-footer">
<button>1-844-WHATEVER(123-4567)</button>
<button>hello#whatever.com</button>
</div>
</div>
</div>
</div>
Everything works fine, you click CONTACT Anchor element and it shows the popup, but How to call popup page from AngularJS side?. For example you have some logic in AngularJS and based on the result you call the pop up and pass some other data to it to display?
Related
I'm using Vue (just started learning it) and Bootstrap to make a blog and I want a modal window (that shows the post's name/etc) to pop up when the user clicks on the comment button. However, right now the modal window only gets the post information from the latest blog post. This means that even if you click the 1st post, you would get the id information and post title of the latest one... Any suggestions or solutions? Thanks in advance!
It seems that the main problem with my code is that it makes n numbers of modals in vue if you have n posts. I have tried slots but the modals started displaying the first post instead of the last one. I wonder if all my modals are being displayed at once but I only the last one... Should I use an index instead?
Is there any way to make only one modal that gets and display the information of the post clicked?
Here's my code of the post component
Vue.component('posts', {
props: ['post', 'loggedUser'],
template: `
<div class='blog-post py-2'>
<h3> {{post.title}} </h3>
<h6> Posted by {{post.postedBy}} on {{formatCompat(post.createdAt)}} </h6>
<span class='comments'>
<i class='far fa-comment-dots ml-3' data-toggle="modal" data-target="#commentModal"></i>
{{post.comments.length}}
</span>
</div>
`
My modal component: (mostly from the bootstrap docs)
Vue.component('modal', {
props: ['post'],
template: `
<div>
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel" 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="commentModalLabel">Comment on {{post.postedBy}}'s post! ({{post.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>
</div>
`
})
Here, I'd like the {{posted.title}} and other information to reflect the post where the comment button is clicked, but it's showing the latest post.
Parent element:
const postComponent = new Vue({
el: '#posts',
data: {
posts: null
},
methods: { // mostly code unrelated to modal stuff
}
My pug file:
#posts
if user
posts(name=username, v-for='post in posts' v-bind:post='post' v-bind:key="post.id" v-on:like-post='like' logged-user=loggedUser v-on:comment-post='comment')
modal(v-for='post in posts' v-bind:post='post' v-bind:key="post.id")
You need to add a custom data property that reflects the selected post for the template to read.
data: {
...
selected: '',
...
}
Then, you need a method that will assign the selected property to whichever post is clicked.
methods: {
changeTitle(postId) {
const currentPost = posts.filter((post) => {
return post.id == postId;
});
this.selected = currentPost.id;
}
}
So now that you have a data property to represent the current selected title, and a method to change that property with a click, you need to assign the directive for the method to the post. So, add this to the html tag you want to trigger the method:
#click = "changeTitle(postId);"
This will trigger the method along with the post id from the post that called the method. The current title can now be rendered anywhere in the template that has access to the data, like this:
{{selected}}
So I have a ng-repeat iterating through an array that contains the elements form an API. Through the ng-repeat , I print out the same number of div(s) containing the names of some properties as the number of property present in the API in different objects. Now the next step that I want is that when I click on any property Name div, another screen is opened up which has the details of the property ( details are then fetched from the API which I can do). What I am not able to do is how to use the ng-click that it goes to the details screen but according the property that is clicked. I know that somehow I need to pass the property ID in ng-click and lead it to a different screen. Can't figure out how. Kinda am new to Angularjs so can someone help?
<div ng-repeat="prop in propertyDetails" class="propertyCard"
ng-click="Something here which I cant figure out ">
<p class="propSummaryName">{{ prop.name }}</p>
<div>
Now when the divs are created for the different properties when I click on one of them a new screen comes and then I show there what I want to show for the property.
PS- for property ID : prop.id
Use can directly write function call.
<div ng-repeat="prop in propertyDetails" class="propertyCard"
ng-click="propDetails(prop.id)">
<p class="propSummaryName">{{ prop.name }}</p>
$scope.showDetails(propId) {
// do want ever you want to };
If you want to show property details on another screen then you can use
modal or routing.
hey it's Simple You can call the #scope function in the ng Click and inside the function call the reset service and then open the popup
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body ng-app="myApp" ng-controller="test">
<div ng-init="loadData()">
<div ng-repeat="prop in propertyDetails" class="propertyCard"
ng-click="openMyPopUp(prop)">
<p class="propSummaryName">{{ prop.name }}</p>
<div>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Name : {{popupData.name}}
Id : {{popupData.id}}
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('test', function($scope, $http) {
var popup = angular.element("#myModal");
//for hide model
popup.modal('hide');
var url = 'your-url.com/rest/api'
$scope.loadData = function(){
$http.get(url).then(function(res){
$scope.propertyDetails = res.data;
});
}
$scope.openMyPopUp= function(data) {
$http.get(url + '?id=' + data.id).then(function(res){
$scope.popupData = res.data;
});
//for show model
popup.modal('show');
}
});
</script>
If you need to rederct to another page mean you can do like this
var url = "http://" + $window.location.host + "/Account/Login";
$log.log(url);
$window.location.href = url;
inside this function
I have a datepicker and when the user enters an invalid date I want to display a proper message
$scope.setDate = function(startDate, endDate) {
$rootScope.startDate = $scope.startDateL;
$rootScope.endDate = $scope.endDateL;
if(($rootScope.startDate == undefined) || ($rootScope.endDate == undefined)){
console.log("choose a valid date");
$mdDialog.show({
cotnroller: DatePickerErrorController,
templateUrl : 'components/jags-date-picker-select/jags-date-picker-modal-valid-date.html',
parent : angular.element(document.body),
clickOutsideToClose:true
}).then(function(answer) {
console.log("Fff");
}, function() {
});
If the date that I want to set is undefined that means that the user has not entered one I want to display a modal with a proper text.
This is the controller for my modal
function DatePickerErrorController($scope, $rootScope){
$scope.text = function(){
return "Some text";
}
}
I want to do some checkings in my DatePickerErrorController. Something like if the startdate is undefined return some text.
This is the modal that should be displayed with a proper message.
<!-- Modal -->
<md-dialog aria-label="Date Picker">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">{{"Error message" | translate}}</h4>
</div>
<!-- /.modal-header -->
<div class="modal-body">
{{text}}
</div>
<!-- /.modal-body -->
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</md-dialog>
<!-- /.modal -->
Now, the problem is that the modal shows up but it is not displaying "Some text". The modal is just blank. Have I done something wrong? This is not the correct way to display a text in html? Somebody with any ideas ?
Thanks in advance!
I have a ng-repeat in my view and I want to pass the object from my ng-repeat to a javascript function but when I try to display it on the console it gives me undefined.
Here is my html:
<!-- Panel -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
{{card}}
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div id="nvd3-container" class="md-card" style="overflow-x: auto" ng-if="dataloaded0">
<md-card-content id="nvd3-scrollable-content" style="width: {{width}}px; height: 350px;">
<md-tabs md-dynamic-height="" md-border-bottom="">
<md-tab ng-repeat="pu in selectedKpi" label="{{pu.dprdProuNr}}">
<md-content class="md-padding">
<div class="row">
<div class="col-md-6">
{{pu.item1}}
{{pu.item2}}
</div>
</div>
</md-content>
</md-tab>
</md-tabs>
</md-card-content>
</div>
</div>
<!-- /.panel-body -->
<a href="" ng-click="footerLinkClicked(pu)">
<div class="panel-footer">
<span class="pull-left">Trend</span>
<span
class="pull-right">
<i class="fa fa-arrow-circle-right"></i>
</span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
<!-- /.panel -->
Here is my js file that returns undefined:
angular.module('App')
.directive('KpiParameter', function() {
return {
restrict: 'E',
templateUrl: 'app/kpi/kpi-parameter/kpi-parameter.html',
scope: {
card: '=',
kpiParamCallback: '&',
selectedProductionUnit: '<'
},
controller: function($scope, $rootScope, KpiChartFactory, $filter) {
console.log("!???????");
console.log($scope.selectedProductionUnit);
$scope.$watch('selectedProductionUnit', function() {
console.log($scope.selectedProductionUnit);
console.log("Changed");
KpiParamUpdated();
$scope.kpiParamCallback({
selectedProductionUnit: $scope.productionUnitDefault
});
}, true);
function KpiParamUpdated() {
console.log("KPiParamUpdated");
console.log($scope.selectedProductionUnit);
$scope.dataloaded0 = true;
KpiChartFactory.get({ pu: $scope.selectedProductionUnit }, function(data) {
$scope.selectedKpi = data;
console.log($scope.selectedKpi);
$rootScope.$broadcast('kpiParams', $scope.selectedKpi);
});
}
$scope.footerLinkClicked = function(pu) {
console.log("parameters received :");
console.log(pu);
}
},
controllerAs: "KpiPCtrl"
};
});
Do you have any idea why? I need to define it also in my js file?
As found in the docs of AngularMaterial, you can only achieve what you want to do by using md-on-select
Attributes
Parameter Type Description
label string
Optional attribute to specify a simple string as the tab label
ng-disabled boolean If present and expression evaluates to truthy, disabled tab selection.
md-on-deselect expression Expression to be evaluated after the tab has been de-selected.
md-on-select expression Expression to be evaluated after the tab has been selected.
md-active boolean When true, sets the active tab. Note: There can only be one active tab at a time.
Note: This event differs slightly from ng-click, in that if a tab is already selected and then clicked, the event will not fire.
Your call to footerLinkClicked() has no way of knowing which pu to use unless you tell it which one to use. And since it's outside of your ng-repeat, there's no overly easy way to do that.
md-tabs has an attribute called md-selected that allows you to store the currently selected index in a variable. So assuming that selectedKpi is an array (or is array-like), you can do this:
<md-tabs md-dynamic-height="" md-border-bottom="" md-selected="selectedTab">
and this:
<a href="" ng-click="footerLinkClicked(selectedKpi[selectedTab])">
and you should be all set.
I have a pure css3 modal call by a link, and I wish to pass some variable to the modal.
Modal
<div id="reasonmodal">
<div class="modal-content">
<div class="header">
Reason
</div>
<div class="copy">
//content
</div>
<div class="footer">Close</div>
<br />
</div>
HTML
//some other code with foreach appid
Click
I want pass foreach appid to the modal, any suggestion to do that ? Thanks
i have an idea (js only):
<a href="#reasonmodal" class="modal-link" rel="<?=$app_id?>" >Click</a>
Close
and modal action :
$(".modal-link").click(function(){
$("#submit-link").attr('href','?r=Register/UpdateReason&appid='+$(this).attr('rel'));
$($(this).attr('href')).modal('show');
});
Just print the var
<div id="reasonmodal">
<div class="modal-content">
<div class="header">
Reason
</div>
<div class="copy">
//content
</div>
<div class="footer">Close</div>
<br />
</div>
I see that you want to dynamically pass variables to the model each time click the html div.
Just use ajax post to get these values and update the modal content before it is triggered
Modal
<div id="reasonmodal">
<div class="modal-content">
<div class="header">
Reason
</div>
<div class="copy" id="modal_content">
//content
</div>
<div class="footer">Close</div>
<br />
</div>
Add a onclick event to html div
<a href="#reasonmodal" onlick='updateModal()'>Click</a>
Implement the updateModal() function which will POST an ajax request to get data. Something like this:
function viewDetail()
{
$.ajax({
type: "POST",
url: <?php echo "\"" . Yii::app()->createUrl('controller/action') . "\""; ?>,
data: { param : "value"},
}).done(function(msg){
//update the model content with msg responded from server
document.getElementById("modal_content").innerHTML = msg;
});
}
The modal will be triggered after the html content is updated.
(Give me a vote-up if it works for you)