Im trying to make a markdown editor with preview via angular filter calling showdown
<textarea ng-model="data.text"></textarea>
<div class="preview">{{data.text|markdown}}</div>
I managed to convert markdown markup on the fly into html but when rendered the actual output on the screen is like this :
<h1 id="thisisaheader">This is a header</h1>
It looks like the resulting markup is escaped. how do i render it unescaped?
You need to use ng-bind-html-unsafe:
<div class="preview" ng-bind-html-unsafe="data.text|markdown"></div>
It's up to you to guarantee that the content is trustful.
If you happen to be using Angular 1.2 RC1, then you should use ng-bind-html along with the new Strict Contextual Escaping service ($sce for short).
Related
I'm struggling with something. I'm using ion-slides to render a set of slides as follows:
<ion-slides options="vm.sliderOptions" slider="data.slider">
<ion-slide-page ng-repeat="notification in vm.subsetNotifications" >
<span ng-include="'notificationSlide.html'"></span>
</ion-slide-page>
</ion-slides>
This is working fine.
However, I want to dynamically add slides to the end using the Swiper API:
vm.slider.appendSlide(HTML);
if I just use plain HTML in the appendSlide, it works fine.
However, I want to parse the template notificationSlide.html with a new set of data currently held in the controller.
Any pointers on how I can do that please?
Regards,
Andyy
I would like to use HTML Beautify against an Angular partial to allow me to present to my client a code snippet of the partial.
The issue I'm running into is that when I beautify the partial to ensure formatting is correct, my directives, that have no arguments are being changed to have a blank ="".
For example:
<div my-directive></div>
Is beautified into
<div my-directive=""></div>
Is there an option I can send to HTML Beautify that will not force the addition of ="" to my directive?
I am using this way:
<div ng-cloak>{{ message.userName || message.text }}</div>
Is this the only / best way to ensure the user does not see the {{ }} when AngularJS is still loading ?
There are several ways to hide content before Angular has a chance to run
Put the content you want to hide in another template, and use ngInclude
<div ng-include="'myPartialTemplate.html'"></div>
If you don't actually want another request made to the server to fetch another file, there are a couple of ways, as explained in the $templateCache docs. There are tools to "compile" external HTML templates into JS to avoid having to do this manually, such as grunt-angular-templates.
Similar to ngInclude, if you put everything in custom directives, with its own template, then the template content won't be shown until Angular has had a chance to run.
<my-directive></my-directive>
With a definition of:
app.directive('myDirective', function() {
return {
restrict: 'E',
template: '<div>Content hidden until Angular loaded</div>'
}
});
ngBind as an alternative to {{}} blocks
<div>Hello <span ng-bind="name"></span></div>
ngCloak as you have mentioned (in this list for completeness).
<div ng-cloak>Content hidden until Angular compiled the template</div>
But you must have certain styles loaded before the page is rendered by the browser, as explained in the ngCloak docs.
You can use ng-bind too as the documentation explains.
A typical advantage about ng-bind is the ability to provide a default value while Angular is loading (indeed, ng-cloak can only hide the content):
<p>Hello, <span ng-bind="user.name">MyDefaultValueWhileAngularIsLoading<span/></p>
Then as soon Angular is loaded, the value will be replaced by user.name.
Besides, ng-cloak is useful when dealing with blocks (many HTML lines) and ng-bind on a particular element.
I'm inside my view.xthml which has facelets component in there. Like:
<ui:composition template="/layout.xhtml"> .. whatever
Being there I try to integrate AngualerJS, putting ng-view, like this:
<div ng-view> </div>
When my /view.jsf is rendering I got server side error:
Attribute name "ng-view" associated with an element type "div" must be followed by the ' = ' character.
So, it validates my html that prevents angular ng-view to start working.
The question is: how to integrate angularjs and its ng-view with jsf/facelets based on my case?
Facelets is a XML based view technology which uses XHTML to generate HTML output. In XML, each element attribute must have a value.
You can indeed assign it an empty string as value, but ng-view="true" or ng-view="ng-view" would be more self-documenting, keeping checked="checked" and selected="selected" in mind.
<div ng-view="true">
<div ng-view = "">
Looks not nice but it works for me on that stage (of getting rid of jsf).
I'm trying to use AngularJS built-in directives to achieve some simple JS effect without writing actual js code. It actually works pretty well, except the initial flash.
I know to deal with text, people should use ng-bind instead of {{}}
But how do you deal with directives like ng-if?
Here is my code:
<li ng-if="!magazines.resolved"> <!-- add "&& isOwner" when done -->
<dl>
<dt ng-model="changeToActivation" ng-init="changeToActivation=false" ng-mouseover="changeToActivation=true" ng-mouseleave="changeToActivation=false"><img ng-if="!changeToActivation" ng-src="<?php echo base_url('public/images/system_icons/add_magazine.jpg');?>">
<img ng-click="addMagazine()" id="activated" ng-if="changeToActivation" ng-src="<?php echo base_url('public/images/system_icons/add_magazine_activated.jpg');?>"></dt>
<dd class="magazineName">Create <br> A new magazine</dd>
<dd class="publishDate">Now!</dd>
</dl>
</li>
I know it gets a bit hard to read, but it's very easy. There is a model defined on <dt></dt> tag. If mouse is over this tag, the model value becomes true; when leaves, it becomes false.
Based on this boolean model value, one or the other image will be shown.
It works like a charm, but I can see both images at the very beginning, flashing!
How to deal with something like this then?
ngCloak may help, but you should also use ng-src for the actual image source, this will prevent your site from loading the image before the model has received a value. Also when using ngCloak, you may need to load the AngularJS source at the top of your html file as it may try to load the image before it knows what to do with the ng-cloak directive.
Applying ngCloak to you dt should do the trick for you: http://docs.angularjs.org/api/ng.directive:ngCloak
Here's an example from the docs. Note that it's added in two places- the directive as well as a class. The class is only needed for IE7 support.
<div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div>