I've been at this for too long.
Basically, I'm pulling information via json.
This works fine, but the information being pulled does not show up as HTML.
I've been trying to get trustAsHtml to work but I do not know what I'm doing wrong.
Here's my code:
Controller:
var pageControllers = angular.module('pageControllers', ['ngSanitize']);
pageControllers.controller('PackagesCtrl', function PackagesCtrl($scope, $sce, $http){
$http.get('scripts/all_packages.php').success(function(data){
$scope.packagesData = data;
});
});
I'm getting groups of data from the database fine. My data is rendering pure text instead of showing the actual html eg: <p class="myClass">My Returned Data</p>
My Html has an ng-repeat="item in packagesData"
and in that div I have:
ng-bind-html="item.more_info".
This returns the data I need, but how would I now make them render properly? Basically, from the returned fields, I need 2 results to show up as html, but everything I try does not work.
My json file returns multiple rows of data, e.g.:
[{"title":"My Title", "more_info":"<p>Information</p>"},{"title":"My Title 2", "more_info":"<p>Information 2</p>"}]
How do I target specific results such as "more_info" to show as html?
basically you right on your path. What you need to do is to check if its the right value with key. Key is you identifier for particular value.
The thing you need to do is to use an ng-if condition.
<h2 ng-if="key=='more_info'" ng-bind-html="value"></h2>
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 this element on my html page:
<div class="section-title" id="bladeSectionTitle"
ng-transclude="title">
</div>
I want to get the value displayed.
I have tried the following in my typescript page & only get null:
var title = document.getElementById("bladeSectionTitle").getAttribute('section-title');
The view source gives me this:
<dpn-blade-section is-checkbox-visible="true" is-checked="$component.showAll">
<section-title>
<h4>Show All</h4>
</section-title>
In this instance, the value I would be looking for is 'Show All'.
Which version of angular are you running? We really need more information here. Although accessing the DOM directly isn't the way to go with angular, you're looking at something like this
var title = document.querySelector('dpn-blade-section section-title h4').innerHTML;
I've got a json file that generates the form definitions for each specific form. In the view - I spit out the data something like this
<input ng-data-model="data[value2.Id]" placeholder="{{value2.Label}}" type="text" />
<button ng-click="send_form()" >Submit</button>
In my controller, I've got the following function
$scope.send_form = function() {
alert($scope.data);
}
When the send_form function is called - i get "undefined" returned back. My question is, how do i handle dynamic form data in Angular JS and get each of the values inserted by the user? Is there a way to get a key/value pair set of data returned? with the ng-data-model has the key and the value inserted by the user as a user? Or how would i handle this specific scenario? Any help would do :)
Thanks :)
It's just ng-model to bind your input to your scope variable. Or you can use data-ng-model for compliance. Other than that it should work if your data is set up - might help to show an example of how it looks.
Here's a fiddle with some dummy data:
https://jsfiddle.net/ba0pj6sv/
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 trying to figure out how to link an html picture element back to the database entry that was originally used to generate the picture link.
I am using Meteor:
- I have a database that contains photosets data from Flickr API
- In the HTML, I have a handlebar "each" script that iterates through each photoset in the database and then uses this info to generate the html for the photoset cover picture links.
- When the html renders, the photoset cover pictures are downloaded from Flickr and displayed to the screen.
I would like to be able to click on the photoset cover picture and then automatically generate the links to the pictures in the photoset. But I don't understand how to dynamically link the html picture elements back to their respective database entries that were originally used for generating the picture links. I need to be able to find the original database entries so that I can load the info needed for generation of subsequent links.
As a newb to all of this I'm not really sure where to start looking or what to try. I've wondered about creating an object with custom key pairs to 'memorise' the identity of each photoset picture. Is this the way to go, or is there an easier way that I am overlooking?
Thanks.
Say you have your pictures being put out this way:
Template.mytemplate.helpers({
picture:function() {
return pictures.find()
}
});
You can also do this instead, which is pretty much the same thing:
Template.mytemplate.picture = function() {
return pictures.find();
}
With the html
<template name="pictures">
{{#each picture}}
<img src="{{src}}" class="pictureselector"/>
{{/each}}
</template>
You can use events which can get data from that particular picture document/record
Template.mytemplate.events({
'click .pictureselector':function(event,template) {
console.log(this._id); //Should give you the `_id` of the picture that was clicked
}
});
this is the data context of the element that was clicked & generate the link you want using the data inside this.
Be careful if you use something with a callback inside the click like Meteor.call, you will have to relay the message down via var self = this otherwise the context of this would become the one of Meteor.call