I am volunteering to write a quick AngularJS App for a non-profit. I have set up Angular successfully but the one problem I am coming across stems from the JSON.
I have a JSON object that contains multiple paragraphs. Therefore I need to separate the paragraphs onto two lines. I did some research and I found some answers to similar questions but because they were not put in context I did not understand them. I tried looking to see if JSON had something built in that forced a line break, because that would do, but I did not find that.
Help is greatly appreciated!
HTML w/ Angular JS
<div class="bio">
{{exhibits[whichItem].bio}}
</div>
JSON
[
{
"name":"Name goes here",
"bio":"First long block of text goes here then it needs a break <br /> and the second long block of text is here."
}
]
#user5854648 Your back-end sending the JSON response in this format .If you are using angular version greater than 1.2 to display the text content with html tags(People's calling this as unsafe html ) use angularjs inbuilt service called $sce .To make it as a reusable component created a custom filter.
var demoApp = angular.module('demoApp',[]);
demoApp.filter('trustAsHtml', [
'$sce',
function($sce) {
return function(value) {
return $sce.trustAsHtml('html', value);
}
}
]);
then make changes in html like
<div class="bio">
{{exhibits[whichItem].bio | trustAsHtml}}
</div>
or
<div class="bio">
<p ng-bind='exhibits[whichItem].bio | trustAsHtml'></p>
</div>
Related
I am doing react native project.
There we are getting questions and answers as Json data. For Answers, We are getting HTML content in answers key.
So, I have to show number of answers in flatlist.
Is there anyway to render HTML content without using Webview?
Json is like following sample:
[ { question: 'How do I change or reset my password?',
answer: <p style="color:#B22222">Color text and <span style="color:limegreen;">another color</span>, and now back to the same. Oh, and here's a <span style="background-color:PaleGreen;">different background color</span> just in case you need it!</p>
},
{ question: 'How do I change my user name?',
answer: <p>Here's a blockquote:</p>
<blockquote>Contents should not be swallowed. This is due to the enormous amount of harmful chemicals that has gone into this burger.</blockquote>
<p>That was a blockquote.</p>
},
{ question: 'How do I change my email ID?',
answer:<p style="font-size:18pt">Text size using points.</p><p style="font-size:18px">Text size using pixels.</p><p style="font-size:larger">Text size using relative sizes.</p>
},
....
]
The data is dynamic and different answers & questions.
Any suggestions, Without using Webview, Can we render HTML content into flatlist for loop.
Try using react-native-render-html:
...
import HTML from 'react-native-render-html';
...
<HTML tagsStyles={{
p: styles.textAuthor}}
html={htmldata}
imagesMaxWidth={screen.screenWidth}
/>
With this library you can manipulate HTML nodes before rendering.
I am using assemble.io and I would want to modularize everyhing using the "atomic design" principles.
Let's say that I start with a couple of single atoms
atomic partial "title" (a-h2-title.html)
<h2 class="{{additionalclasses}}">{{title}}</h2>
atomic partial "info text" (a-info-text.html)
<div class="info {{additionalclasses}}">
{{{text}}}
</div>
As far as I have understood, if I want to use "instances" of these generic components with some data I can define them in a json file like in this example:
info-text-example1.html
{{>a-info-text info-text-example1}}
info-text-example1.json
{
"text":"<p>some text</p>",
"additionalclasses"="info--modified"
}
Ok, now my problem is when I want to define for example a molecule:
m-text-and-title.html
<div class="box {{additionalclasses}}">
{{>a-h2-title}}
{{>a-info-text}}
</div>
Now, if I want an "instance" for this element
text-and-title-example1.html
{{>m-text-and-title ???}}
How can I define all the data for the object itself (additionalclasses) and for the child objects?
I hope I have made myself clear
I've already seen this article here but I am not able to adapt it to my case
Thank you for your answer
You will still have to create the data structure in a way that you need it, then in the pages or partials pass the values to the sub-partials. So in this case, I think you can use the following pattern:
text-and-title-example1.html
{{>m-text-and-title text-and-title-example1}}
text-and-title-example1.json
{
"additionalclasses": "text-and-title--modified",
"title-example": {
"title": "some title",
"additionalclasses": "title-modified"
},
"text-example": {
"text": "<p>some text</p>",
"additionalclasses": "info--modified"
}
}
Then update the molecule to be this:
<div class="box {{additionalclasses}}">
{{>a-h2-title title-example}}
{{>a-info-text text-example}}
</div>
Now this works the same way as your initial example. You have a data object with properties that you've specified, then you pass those properties into the partials that will use them. The "atoms" have generic, reusable properties already and you can change your "molecule" to do the same... like change title-example to title and text-example to text, but keep them as objects that are passed down to the "atoms".
I'm using handlebars and assemble with yeoman and gulp.
I want to have some globalized partials that are able to be nested or injected into another partial by calling it within the context of a data object.
A simple example of that would be having a list of links that I could reference inside content throughout the site. The reason behind this, is the need for consistency. If for example, if I have a link within text on a page that I reference a 15 times throughout an entire website, but then realize I need to add a trade mark or modify the text, I want to update it once, not 15 times.
This is an example of what I want to do. Define global data inside a json file:
links.json
{
"apple": {
"linktext": "apple",
"target": "_blank",
"href": "http://www.apple.com"
},
"blog-article-foo-bar": {
"linktext": "foo bar",
"href": "http://www.foobar.com"
},
"dell": {
"linktext": "dell",
"target": "_parent",
"href": "http://www.dell.com"
}
}
Generate a partial from that content using a simple or complex template:
links.hbs
<a href="{{href}}" {{#if target}}target="{{target}}"{{/target}}>{{linktext}}</a>
And be able to embed that partial into another one by referencing it some how. This didn't work, but I've been reading about custom helpers, but can't figure out how I would intercept the partial and bind it into the other partial.
text.json
{
"text": "If you need a computer, go to {{> link link.apple}}."
}
text.hbs
<p>
{{text}}
</p>
compiled.html
<p>
If you need a computer, go to apple.
</p>
If you have suggestions or examples that might help me understand how to achieve this, I'd really appreciate the support. Thanks in advance.
There is some information about Handlebars helpers in their docs but not that much.
Since you're trying to use handlebars syntax in the value of a property on the context (e.g. text), handlebars won't render the value since it's already rendering the template. You can create your own helper that can render the value like this:
Handlebars.registerHelper('render', function(template, options) {
// first compile the template
const fn = Handlebars.compile(template);
// render the compiled template passing the current context (this) to
// ensure the same context is use
const str = fn(this);
// SafeString is used to allow HTML to be returned without escaping it
return new Handlebars.SafeString(str);
});
Then you would use the helper in your templates like this:
{{render text}}
Thanks for the example #doowb, your code did work but not for what I was trying to do. I really wanted something more complicated but I simplified my question not knowing it would be an issue. The code you provided worked (I think after a slight tweak) for a simple render of a template, but my templates use helpers such as #each and #if which caused the issue. Where the helpers were in my template, I ended up getting async placeholders. For example: <a $ASYNC$1$3...> I later learned this has to do with how partials are rendered. Understanding that lead me to subexpressions and the below solution.
Keeping my example above with some modifications, this is how I was able to merge partials.
First, I simplified the placeholder in text.json to basically a unique ID, instead of trying to render the partial there.
On the hbs template that I'm rendering to, such as a page or whatever, I included the insert helper with 3 arguments. The first two are subexpressions, each return a flattened partials as strings. The key here is that subexpressions process and return a result before finishing the current process with the helper. So two flattened templates are then sent to the helper along with the placeholder to search for.
The helper uses the third argument in a regex pattern. It searches the second argument (flattened parent template) for this pattern. When found, it replaces each instance of the pattern with the first argument (yes its a global fine replace).
So, the flattened child string gets inserted into parent each time placeholder is found.
First argument
(partial "link" link.apple)
Returns
'apple'
Second argument
(partial "text" text.text-example)
Returns
'<p class="text font--variant">If you need a computer, go to {{linkToApple}}.</p>'
Third argument
'linkToApple'
text.json
{
"text-example": {
"elm": "quote",
"classes": [
"text",
"font--variant"
],
"text": "If you need a computer, go to {{linkToApple}}."
}
}
text.hbs
<{{elm}} class="{{#eachIndex classes}}{{#isnt index 0}} {{/isnt}}{{item}}{{/eachIndex}}">{{text}}</{{elm}}>
compile.hbs
{{insert (partial "link" link.apple) (partial "text" text) 'linkToApple' }}
compile.html
<p class="text font--variant">If you need a computer, go to apple.</p>
gulpfile.js
app.helper('insert', function(child, parent, name) {
const merged = parent.replace(new RegExp('\{\{(?:\\s+)?(' + name + ')(?:\\s+)?\}\}', 'g'), child);
const html = new handlebars.SafeString(merged);
return html;
});
Hope this helps someone else. I know this can use improvements, I'll try to update it when I get back to cleaning up my gulp file.
I have an traditional asp.net application which reads HTML template and renders it inside div control. Using bootstrap xeditable user can edit certain parts of the template (only text). This template is later used to send emails. This functionality is working fine. Now I am rewriting this application using AngularJs and WebApi. I am using angular route to route to different pages (plain html) of the application. I am able to load the template using directive. now I want to allow user to edit the text and save the complete template so that it can be used later for sending email.
MyTemplate.html
<p>this is some text</p>
<p>this is some more text</p>
<p>this is some another text</p>
Directive
myapp.directive("customDirective", function () {
return {
templateUrl: 'MyTemplate.html'
};
});
Notify.html
<div>
<h2>{{message}}</h2>
<input type="button" ng-click="Redirect()" value="Report" />
</div>
<custom-directive></custom-directive>
I want that user should be able to edit the text in MyTemplate.html and save it as complete template for later use. Is this achievable?
Do not store it in file. Store the template in your database. Provide a default value there, so something shows if the user has not modified it yet.
In you directive, load the template from your database through your API. After you do that, append the template to the contents of your directive inside your link callback function and compile the directive (if needed).
myapp.directive("customDirective", ($compile, yourService) => {
return {
link: (scope, elem) => {
yourService.fetchTemplate().then(template => {
elem.html(template);
$compile(elem.contents())(scope);
});
}
}
});
Please make sure to sanitise your data properly. It could be fairly dangerous injecting and compiling template created by the user.
I hope this points you in the right direction.
Edit
You might not event need the $compile step. It depends on what kind of template you have in mind. If it is just a simple element without any connection to angular, simply skip the $compile line.
Edit 2 - Display the template on click
Please note the following is just a very simplified version, but it should point you in the right direction.
In your parent controller
$scope.state = {
displayTemplate: false
};
In your template
<my-template-directive ng-if="state.displayTemplate"></my-template-directive>
<button ng-click="state.displayTemplate = true">Show Template</button>
I followed the steps as per the following guide tutorial:
http://2sxc.org/en/Learn/Getting-started-with-creating-stuff/First-Content-Template
But I am having trouble with one or two issues.
When I get to Step 2.2 Add the Demo Template by pasting in the Template.txt file into my newly created Template .cshtml file, I am not seeing as expected with my Heading (Content.Title) and my Call to Action button/link (Content.LinkText) are not appearing on screen. This is preventing me from creating even the most simple of templates
After pasting in the Template.txt code:
<div class="sc-element"> #Edit.Toolbar(Content) <!--- Edit toolbar -->
<div class="co-person-image col-sm-4">
#if (!String.IsNullOrEmpty(Content.Photo))
{
<img src="#Content.Photo?w=350" alt="#Content.Name" class="img-responsive" />
}
else
{
<div class="co-person-placeholder"></div>
}
</div>
<div class="co-person-text col-sm-8">
<p>
<strong>#Content.Name</strong><br />
#if (!String.IsNullOrEmpty(Content.Position))
{
#Content.Position<br />
}
</p>
<p>
#if (!String.IsNullOrEmpty(#Content.EMail))
{
#Content.EMail<br />
}
#if (!String.IsNullOrEmpty(Content.Phone))
{
<text>#Content.Phone<br /></text>
}
</p>
#Html.Raw(Content.Description)
</div>
</div>
I am not seeing any placeholder and when I upload an image using ADAM it too wont appear to screen?
Not sure what I am doing wrong but would really appreciate some help on this as I also tried simply pasting in code from another one of your bootstrap templates into my new template but am getting the following error:
Error: Microsoft.CSharp.RuntimeBinder.RuntimeBinderException: The best
overloaded method match for 'string.IsNullOrEmpty(string)' has some
invalid arguments at CallSite.Target(Closure , CallSite , Type ,
Object ) at
System.Dynamic.UpdateDelegates.UpdateAndExecute2[T0,T1,TRet](CallSite
site, T0 arg0, T1 arg1) at
ASP._Page_Portals_0_2sxc_Content__text_block_image_block_12_cshtml.Execute()
in d:\Inventise\trunk\Customers\St Josephs
Foundation\Projects\Website\Sources\DNN-Root\Portals\0\2sxc\Content_text
block_image block_12.cshtml:line 26 at
System.Web.WebPages.WebPageBase.ExecutePageHierarchy() at
System.Web.WebPages.WebPageBase.ExecutePageHierarchy(WebPageContext
pageContext, TextWriter writer, WebPageRenderingBase startPage) at
ToSic.SexyContent.Engines.RazorEngine.RenderTemplate() in
C:\Projects\2SexyContent\Web\DesktopModules\ToSIC_SexyContent\2Sexy
Content Razor\RazorEngine.cs:line 76 at
ToSic.SexyContent.Engines.EngineBase.Render() in
C:\Projects\2SexyContent\Web\DesktopModules\ToSIC_SexyContent\SexyContent\Engines\EngineBase.cs:line
89 at ToSic.SexyContent.SxcInstance.Render() in
C:\Projects\2SexyContent\Web\DesktopModules\ToSIC_SexyContent\SexyContent\SxcInstance.cs:line
200
The path mentioned in the above error message appears wrong but I don't know where this can be amended?
I would appreciate help on this issue.
Regards
I'll try to guide you through it, but I'm guessing you forgot to set a demo-item.
The demo-item is used to show data on a template, till a user adds his own. So it's really important to create an item in the admin UI (Step 1.5) and assign it to the template (Step 1.5.1). This allows the template to render, before you add any data to a page :).
If you don't have a demo-item, the template assumes it can't render, and will show a message that it doesn't have data yet - or it will try to render, and fail with errors like the one above.
Did that help?