I used SyntaxHighlighter API to highlight the given xml snippet.The xml string generate from server side and angular controller set value into the html page.
Sample HTML snippet
<div class="modal-body">
<pre id="xmlText" class="brush:xml">{{xml}}</pre>
</div>
AngularJs controller snippet
//code goes here
$scope.xml=data.xml;
data fetching successfully.but the problem was that when set xml content into <pre> via {{xml}} nothing display.Please let me know how to solve this.
Note:I have included necessary SyntaxHighlighter files.when i manually copy some xml string into pre its works fine.but via Angular model its empty.
Related
I hvae an angular view of a pdf preview that utilizes a controller to fill the view in. I am using pdflayer then to convert the html page into a pdf. The problem however is that no matter how I try and do this the scope variable values never make it into the pdf. I am basically trying to figure out a way to capture the angular view as an html string (data already injected) so that I can pass it to pdflayer. I have tried creating a directive and used replace within the directive then collecting the DOM as a string using .HTML().
For example:
I could like this
<div id="name">{{test.name}}</div>
to become this
<div id="name">Bob Smith</div>
It inevitably however turns into this when i use $('#name').html() and then console log it
<div id="name"></div>
or
<div id="name">{{test.name}}</div>
Any help would be appreciated even if the solution is to use a different method to create the pdf. Ultimately, I need to get a angular view into a formated pdf.
Please check if below library would work for you : https://www.npmjs.com/package/angular-save-html-to-pdf
I have a custom directive that loads .GSP template i.e.
In my directive I have
template: '/view/pages/dummy.gsp'
In dummy.gsp,
I have a checkbox like below:
<input type="checkbox" name="orangeFruit"> Orange </input>
Now here instead of using the hardcoded Orange I want to use something like this :
<div ng-repeat="thisfruit in fruits">
<input type="checkbox" name="{{thisfruit}}chkbox">
${message(code:'label.{{thisfruit}}')}
</input>
</div>
Above snippet is of my angular template where I am iterating through list of fruits and putting checkboxes for each one of them.
fruits:["orange","apple","banana"] is the angular JSON object.
where {{thisfruit}} is Javascript object and has the value orange.
Below is how my messages.properties file looks like:
label.orange=Orange
label.apple=Apple
label.banana=Banana
When I run the above message code it always gives me "label.orange" instead of "orange". I have this key in my messages.properties file so it should find it.
when I replace label.{{thisfruit}} with the label.orange it gives the correct value.
Any help is appreciated!
This is not possible at all and is a most common problem people used to get confused on. You are basically trying to fix a server side GSP or Groovy code with client side javascript or angular code.
GSP file gets compiled at server side not at browsers so it does no about any angular code like {{thisfruit}} which will never be compiled at server side.
Similarly when GSP's are compiled into HTML code it will get converted to HTML code which a browser understands how to render it and there your angular code gets executed.
So when it renders at client side there will be no code available like ${message(code:'label.{{thisfruit}}')} you are trying to execute since it has already got compiled at server side before rendering.
So you can not use server side (Grails) message code at client side (angular) code.
Well for that you can use a pretty awesome client side library for angular. http://angular-translate.github.io/
Check it out.
Want to build a very simple app that both has some html pages but will allow for an api as the output is just some calculations done by js.
I want to render a json output from my controller and not render html file. Any ideas how to do so with angularjs?
The problem is that a JSON document will be a single request, where the returned content has content type application/json.
If you want Angular.js, which is a frontend library, you need to make a request for an HTML document (and render the necessary HTML markup in the process), then for the angular.js library. What is rendered afterwards is still HTML (content type: text/html).
So the answer is: no, you cannot do that with Angular.js.
You will need a server-side script to output a properly formatted JSON (and nothing else) and the correct Content-Type header.
Here is a AngularJS module called json. Use it as a filter in your output.
Usage (In HTML Template Binding):
{{ json_expression | json }}
Usage (In JavaScript):
$filter('json')(object)
Where the object is
Any JavaScript object (including arrays and primitive types) to filter.
Example:
<pre>{{ {'name':'value'} | json }}</pre>
Output:
{
"name": "value"
}
I have an app that requires HTML to be pieced together from different APIs. Rather than getting into specifics there, let me just say that we have tried getting away from that many times but in the end the best answer always end up being what we currently have. Hopefully that changes someday but for now it's working great.
Currently, the HTML is parsed together as a string server-side using NodeJS and sent across the wire as complete HTML to be rendered. I'm in the process of adopting AngularJS, and while I'm loving it I am stuck on this issue-- how can I use Angular templating to insert invalid HTML at times?
The server will return three JSON fields: leadingHTML, trailingHTML, and copy. The copy field is always valid HTML, but leadingHTML and trailingHTML can sometimes return invalid HTML. When all three are added together, valid HTML results.
Let me illustrate:
leadingHTML='<figure>';
copy = '<img src="img1.jpg"/><img src="im2.jpg"/><figcaption>I love AngularJS</figcaption>';
trailingHTML='</figure>';
As you can see, if you add those together you will get the valid HTML that is required to be displayed. It's pretty easy to make the fields trustworthy HTML in Angular:
for (i in data.results){
data.results[i].copy=$sce.trustAsHtml(data.results[i].copy);
data.results[i].leadingHTML =$sce.trustAsHtml(data.results[i].leadingHTML );
data.results[i].trailingHTML =$sce.trustAsHtml(data.results[i].trailingHTML );
}
And then render the copy in my view:
<div ng-repeat='i in data.result'>
<p ng-bind-html='i.copy'></p>
</div>
But I need a way that does what this looks like it would do, but the leadingHTML and trailingHTML scope variables get render as strings:
<div ng-repeat='i in data.result'>
{{ i.leadingHTML }}
<p ng-bind-html='i.copy'></p>
{{ i.trailingHTML }}
</div>
Is the best answer here to build the template via javascript? Would that even work?
Are you able to pre-process your data so that you do have valid HTML?
var item;
for (i in data.results){
item = data.results[i];
item.content = $sce.trustAsHtml(item.leadingHTML + item.copy + item.trailingHTML);
}
Then you can just bind to the combined content in the view:
<div ng-repeat='i in data.results'>
<div ng-bind-html='i.content'></div>
</div>
Edit:
Yes, this will allow you to embed expressions in your HTML content.
In fact, you will need to be careful that you aren't opening yourself up to security exploits in the trusted HTML content (see the example at the bottom of the page for the $sce service).
Using $sce.trustAsHtml in this way is roughly equivalent to loading a directive's templateUrl from your site, so the security considerations around that are probably the same. See the "How does it work?" and
"Impact on loading templates".
I'm new to AngularJS, coming from a PHP background where I do all the template aggregation on the server. With PHP I would grab several templates, mash them together, then send it to the clients browser. AngularJS allows me to insert a template using ng-view. This is great, but it doesn't handle the case where the template that I insert may include tags that are placeholders for other templates. For example, I may have the following as one of my templates:
<div class="some_class">
<div class="another_class">
{content}
</div>
</div>
In PHP I would insert this template, then replace the contents of {content} with another template. In AngularJS I know how to insert the main template (using ng-view), but I'm not sure how to dynamically load my "partial template" into the {content} tag. How is this suppose to be done with AngularJS?
A straightforward approach would be to use the ngInclude directive:
<div class="some_class">
<div class="another_class">
<ng-include src="templatePath"></ng-include>
</div>
</div>
Then, in Controller that is associated with this template you can define the templatePath variable dynamically:
function MyCtrl($scope){
$scope.templatePath = // define this var dynamically here
}
Using ng-view to nest multiple templates is not currently supported natively in Angular.js. There are, however, multiple options to emulate that functionality. See the answers in this SO question for several of those options, including the ui-router suggested by akonsu.