I am binding the angular java script expression to bind the simple value i have written in controller function.
here is my webpage code that is created using master page,
<div class="dashboard-content-wrap auto-padding" ng-app="myModule" ng-controller="myController">
<div>
{{employee.name}}--{{employee.country}}--{{1+2}}
</div>`enter code here`
and given below is js file code,
var myApp = angular.module("myModule", [])
.controller("myController", function ($scope) {
var employee={name:"john",country:"US"};
$scope.employee = employee;
});
i am not able to bind this value in my web page please help?
I dont see any problem with your code except a missing div tag.
<body>
<div class="dashboard-content-wrap auto-padding" ng-app="myModule" ng-controller="myController">
<div>
{{1+2}}
{{employee.name}}--{{employee.country}}--{{1+2}}
</div>
</div>
</body>
Please see if this fiddle helps you.
Related
Is there a way without going to JavaScript that Spacebars can pass a variable to a modal?
For example, when I try:
<button type="button" id="genbtn" data-toggle="modal" data-target="#entryModal">Pass</button>
{{> newentry var=item}}
It does not work inside the modal:
<template name="newentry">
{{#with var}}It displays here!{{/with}}
<div id="entryModal" class="modal fade" role="dialog">
{{#with var}}Does not display here!{{/with}}
(Rest of modal works just fine)
I can't figure out why the variable can get into the template, but not past the modal. Otherwise the modal's non-var related functions work just fine. Why does this interrupt? Can it be overcome? If so, how?
Note: If this cannot work without going to the JavaScript, I can do it, but it feels like the wrong solution to this problem.
I had the slimier Issue recently so I just share my working example. I am using the below code and it's work perfectly.
{{>userInfo userId=customer._id userType='Customer'}}
then in userInfo template i got the userType as:
<div class="panel panel-{{currentColor ../userType}} user-info">
Please note the ../ before userType. and I am also using userId in js as:
Template.currentData().userId
so that can be used in any way like am doing as a helper
relatedUser: function(){
return Meteor.users.findOne({_id: Template.currentData().userId})
}
hope my examples can help :)
Update
make a helper in newentry Template as :
myReactiveHelper: function(){
return Template.currentData().var
}
and then in your template bind that helper instead of var as :
{{#with myReactiveHelper}}Does not display here!{{/with}}
I think it would be better and simple to use Jquery lightbox_me plugin which wrap your modal into meteor templates.
For example.
$body = $('body')
UI.render Template.release_info, $body[0] //rendering template
$popup = $body.find("#releases-info-popup-container") // modal Id
$popup.lightbox_me
centered: true
destroyOnClose: true
Template
<Template name="release_info">
<div id="releases-info-popup-container">
</div>
</Template>
I'm struggling with fullpage.js in Meteor.
When I add a button inside a template, the Template.templatename.events function does not fire on event.
For example:
Template HTML (messages.html)
<template name="messages">
<ul>
{{#each mess}}
<li>{{ messContent}}</li>
{{/each}}
<button class="addMessage">Add Message!</button>
</ul>
</template>
Template JavaScript (messages.js)
Template.messages.helpers({
mess: function(){
return Messages.find();
}
});
Template.messages.events({
'click .addMessage' : function(event){
console.log("clicked")
}
})
Main HTML
<head>
<title>fulltest</title>
</head>
<body>
{{> full}}
</body>
<template name="full">
<div id="fullpage">
<div class="section active">
<h1>First slide</h1>
{{> messages}}
</div>
<div class="section">
<h1>Second slide</h1>
</div>
</div>
</template>
My fullpage initialisation:
Template.full.rendered = function(){
$('#fullpage').fullpage();
}
If I remove the fullpage initialisation then the click event gets logged. Still new at Meteor, I didn't manage to grasp what's going wrong here.
All help much appreciated,
Joris
Use delegation or use verticalCentered:false and scrollOverflow:false.
From the fullPage.js FAQs:
My javascript/jQuery events don't work anymore when using fullPage.js
Short answer: if you are using options such as verticalCentered:true or overflowScroll:true in fullPage.js initialization, then you will have to treat your selectors as dynamic elements and use delegation. (by using things such as on from jQuery). Another option is to add your code in the afterRender callback of fullpage.js
Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as "dynamically added content" and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.
I'm trying to get the following behavior for a certain template:
<body onload="someInitFunction();">
Let's say i have the following markup (i'm using mrt router, not iron-router, for {{renderPage}}):
// Main Template
<head>
<title>meteorite-knowviz</title>
</head>
<body>
{{> header}}
<div class="container-fluid">
<div class="row">
{{renderPage}}
</div>
</div>
{{> footer}}
</body>
That renderPage is the secondTemplate:
<template name="secondTemplate">
{{#if currentUser}}
<div class="col-md-2">
<div class="list-group">
<a class="list-group-item" href="{{render thirdTemplate please...}}">Third Template</a>
<a class="list-group-item" href="{{render fourthTemplate please...}}">Fourth Template</a>
</div>
</div>
// In this case let's say thirdTemplate gets rendered
{{render the choice taken above please...}}
{{/if}}
</template>
And within this template, depending on which link was clicked on, (in this case the third) there will finally be a thirdTemplate, which will show a data visualization with some help by a javascript framework, which will be in need of a <body onload="initFunction();">in order to display the data:
<template name="thirdTemplate">
<div class="col-md-5">
<h2>THIS!! section needs a "<body onload="initFunction();"> in order to work" ></h2>
</div>
<div class="col-sm-5">
<h2>Some other related content here</h2>
</div>
</template>
To sum up i have three questions:
1a. How could i get the third template to get a <body onload="initFunction();">
2a. In which way can i render different templates within the secondTemplate?
2b. Can i use a {{renderPage}} within this template even though this template is the renderedPage in the main template or should i do it in some other way?
In order to get the <body onload="initFunction();"> i had to do the following:
First add the following function to a .js file in the client folder:
Template.thirdTemplate.rendered = function() { // Template.thirdTemplate.created - also worked.
$('body').attr({
onload: 'init();'
});
}
This however got me an error saying that initFunction is not defined. In an standard html page my could work just fine, but in meteor i had to change my function from:
function initFunction(){
//what ever i wished to do
}
To:
init = function() {
//what ever i wished to do
}
Regarding the rendering of pages, iron-routing is the way to go since the router add on is not under development any more.
1a. How could i get the third template to get a <body
onload="initFunction();">
You probably want to call initFunction when the third template has been rendered, so just put your call to it in the rendered callback.
Template['thirsTemplate'].rendered = function(){
initFunction()
}
2a. In which way can i render different templates within the
secondTemplate?
2b. Can i use a {{renderPage}} within this template even though this
template is the renderedPage in the main template or should i do it in
some other way?
Listen for clicks on the links, and when one happen you manually render the desired template (possible with Meteor.render, if you need reactivity) and add it to the right node in the document. See this question.
It may be possibly to achieve with router (I don't know that package).
I think that what you want to use is the created callback, that will be called each time your template is created, and not the rendered callback, that would be called each time a change has caused the template to re-render.
Template.thirdTemplate.created = function(){
initFunction()
}
See the documentation for templates for other types of callbacks: http://docs.meteor.com/#templates_api
I have a layout like this. I am using passsy extension for angular masonry.
<masonry column-width="200">
<div class="masonry-brick" ng-repeat="data in comments">
<div ng-switch on="data.type">
<div ng-switch-when="hoots">
<article class="hoot_main">
//content goes here
//hoot_main is the main class for this div layout
</article>
</div>
</div>
</div>
<div ng-switch on="data.type">
<div ng-switch-when="article">
<article class="hoot_main">
//content goes here
//hoot_main is the main class for this div layout
</article>
</div>
</div>
<div ng-switch on="data.type">
<div ng-switch-when="story">
<article class="hoot_main">
//content goes here
//hoot_main is the main class for this div layout
</article>
</div>
</div>
</div>
</masonry>
Browser is getting hanged whenever I use it. Debugging script with tools says element.masonry is not a function.
Any help would be appreciated!
Hmm, at the moment I work from my laptop at home and I can't get passy's version running too and can not put my finger on the issue. But this is what I can offer you for now:
I made a very simple directive based on things I've read somewhere:
app.directive('masonry', function() {
return {
restrict: 'AC',
controller: function($scope) {
return $scope.$watch(function(e) {
$scope.masonry.reloadItems();
return $scope.masonry.layout();
});
},
link: function(scope, elem, attrs) {
var container=elem[0];
var options='';
return scope.masonry = new Masonry(container,options);
}
};
As you can see it does not have a any options by now. When i'm at work on monday i will have a look at my sources on a proper dual screen display and provide you with a better version.
My wife is starting to giving me the looks and I need to put the laptop away now. :-\
You can see in this plunker that it kinda works now. Maybe this can help you. In the meantime can you add some of your json data to your question? Have a nice weekend for now!
In order to get Passy's angularjs directive working you must include all the files as listed per the index file
I had this error, fixed it by including the original Masonry code. I was also thinking this was a pure angular port.
I am new to struts. Iam developing applcation using struts.Can anyone help in the code for fullcalendar in struts with database ?
Sure just populate your bean with your json to populate the calendar. Then use a define tag on the page and use it to populate your calendar. Here is a simple example.
<bean:define id="calendarJson" name="formName" property="bean.calendarJson" />
<script>
$(document).ready(function() {
$('#calendar').fullCalendar(
<%= calendarJson %>
);
});
</script>
<div id="calendar" class="myFullCalendar"></div>