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?
Related
I'm working on a style guide and want to add syntax highlighting and code samples dynamically without having to copy/paste and escape the code for each item. The idea is that for each bb-prism directive, I include a bb-sample element that contains my code sample. The bb-prism directive clones the innerHTML of the code sample, creates pre and code elements, and then copies the clone into the code element. It's pretty slick except for when using ng-repeat. Angular seems to remove the ng-repeat before my prism directive can copy it.
<bb-prism>
<h2>Multiple Addresses</h2>
<bb-sample>
<!-- Doesn't work with ng-repeat -->
<bb-address address="address" ng-repeat="address in addresses"> </bb-address>
</bb-sample>
</bb-prism>
The expected result is that the sample code should render:
<bb-address address="address" ng-repeat="address in addresses"> </bb-address>
Instead of:
<!-- ngRepeat: address in addresses -->
Here's a working example:
http://codepen.io/rustydev/pen/77fc7dc3e5365f10ebfabd54440f07c7/
I played with numerous approaches, including using pre-compile in a stripped down version and couldn't log the html to console.
I propose an alternate approach that will show only the original clean markup and without any angular internal classes added
It uses script tag templates, $templateCache and ng-include.
Here's a rough ( but working) proof of concept setting markup in a textarea for now
View
<div test template ="repeat">
<h3>repeating items example</h3>
<!-- Our snippet template -->
<script type="text/ng-template" id="repeat">
<div ng-repeat="item in items">{{item}}</div>
</script>
<!-- include same template -->
<ng-include src="'repeat'"></ng-include>
<!-- source display -->
<h3>source</h3>
<textarea style="width:100%"></textarea>
</div>
Directive
.directive('test', function($templateCache) {
return {
scope: {template: '#'},
link: function(scope, elem) {
var code =$templateCache.get(scope.template);
elem.find('textarea').val(code.trim())
}
}
});
DEMO
Note that there are gulp and grunt scripts that can compile whole directory of html files into $templateCache also and put them in a run() block
Another thought is use ng-include or templateUrl(function) for each of your html prism components and use $templateCache to get whole block of html and use find() on that to get the uncompiled innerHTML of <bb-sample>
EDIT: More comprehensive demo
I'm using twitter bootstrap with a popover and got a AngularJS scoped variable to appear correctly. The below works.
(data-content="{{notifications[0].user}} shared {{notifications[0].user_two}}'s records")
When I add the following
(data-content="<b>{{notifications[0].user}} shared {{notifications[0].user_two}}'s records</b>")
No errors show up, but all of the {{}} no longer render.
So I tried this as a test of sorts
(data-content="<div ng-repeat='item in notifications'>test {{item}} <br/><hr/></div>")
Much like the last example, I see the "test" but not the {{item}}. And the "test" only show s up once, even though the notifications had three elements. When I look at the DOM there's this
<div class="popover-content">
<div ng-repeat="item in notifications">you <br><hr></div>
</div>
I've also tried just creating a directive to iterate through the array and make the output I want, but my attempt to set data-content equal to a directive have been failures. The examples I've found elsewhere I'm confident would work, but I just wanted to confirm before I begin implementing something like this (http://tech.pro/tutorial/1360/bootstrap-popover-using-angularjs-compile-service) or (Html file as content in Bootstrap popover in AngularJS directive) that I'm not missing a straightforward fix to the problem I outlined above that would not require me creating a directive.
Edit:
Plunkr Url http://plnkr.co/edit/VZwax4X6WUxSpUTYUqIA?p=preview
html might be breaking it, try marking it as trusted html using $sce
How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+
$scope.html = '<ul><li>render me please</li></ul>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);
<button ... data-content="trustedHtml" ...> </button>
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).
When I call a rest service then i will get .html file from server. But it showing scripts for 1 or 2 seconds. Then it shows correct values.My problem is page loads first then controller binds data. Is there is any way to bind data before loading page?
There are basically two options that I know of:
The preferred option is to add ng-cloak to sections of the page that contain angular templates. From the docs:
<div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div>
Use ng-bind instead of the {{ }} approach. For example:
<div ng-bind="marked4Reviewcount"></div>
Have a look at the ngCloak directive. It temporarily hides the Angular template while the page is being loaded. You could apply it on the body tag, but it's advised to do it on portions of the page so you get a progressive loading effect.
http://docs.angularjs.org/api/ng.directive:ngCloak
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).