Hiding angularjs attribute in html output - html

Let's say I have an angular directive for displaying media files (images & videos). It could look like this:
<div my-media mediatype="MediaFile.Type" mediapath="MediaFile.Path"></div>
Is it possible to hide that directive's attribute in html output? Or at least it's value.
For example, I have a similiar directive which is repeated with ng-repeat and it's "mediapath" is base64 code from html input files. Those paths greatly increase size of html and it is very hard to modify that kind of code. Also browser always freezes when inspecting such an element.

You can call to a $scope function that returns the value.

Related

How to show rendered template as raw source code block?

I want to provide a rendered HTML block that shows an email signature - what it looks like with user data from the context - and also displays the populated HTML code as raw src to be copied for pasting into customers email signature. What would be the best (dry) way to do this?
I have tried render_to_string as a variable in the context but the HTML is rendered.
I solved this by following this answer:
How do I perform HTML decoding/encoding using Python/Django?
The rendered django template HTML needs to be decoded before it can be shown in the pre tag otherwise it will be marked up by the browser.

ng2-table angular2 rc4 HTML tags

I have a angular2 component which is generating data to populate my ng2-table, but I cannot seem to put HTML tags into a cell. Instead the cell renders as such:
https://github.com/valor-software/ng2-table/issues/51
I've tried to modify the js file that is coming down as indicated as an older fix but changing the markup to the [innerHtml] angular2 element does not appear to be accepted.
It seems that others are having this problem as well, has anyone else found a solution? I'm aware that ag-grid is capable of doing this, but we need to use ng2-table as it supports bootstrap pagination which ag-grid does not appear to.

Using node and node-phantom to scrape AngularJS Application

I have a node script set up to scrape pages from an AngularJS application and then generate code needed for testing purposes. It works great except for one thing. ng-if. Since ng-if removes elements from the dom the script never sees these blocks of code. I can't remove the ng-if's. So I'm wondering if there is some way to intercept the html between when node-phantom requests the page and when it actually loads everything in to phantoms dom. What I'm hoping to do is simply set all the ng-if's to true so that all content is available. Does anyone have any ideas for this?
EDIT I'm using phantomjs-node not node-phantom.
My Final solution was to scrape the page for all of the comment tags. Then filter through to find the ones that contained ng-ifs and parse out variable names from those tags. Then I tapped into Angular's $scope and set all of the variables to true. Forcing everything that is hidden on the page to be visible.

Valid HTML5 and img src-attribute on AngularJs ng-src

Anyone has idea, how to produce valid HTML5 when images are displayed with AngularJs ng-scr directive?
What I have discovered?
"src"- attribute is required on img-tags
It can't be empty
Console reports 404 error if I set src attribute data with angular binding, cause it tries to load image before Angular has initialized
Why I want valid HTML?
Reason is simple. Strange HTML errors (missing end tags, open tags etc..) causes strange behavior in our project where we have LOTS of views. Ensuring periodically that source is valid, makes code less unstable.
From this post stems a genious hack:
<img ng-src="modelImage" src="//:0">
...much easier to remember from the top of your head than an image URL ;)
ngSrc: any string which can contain {{}} markup.

Extract (random) image with no useful src= from web page

First I'd like to know how this can be achieved in general, and then maybe someone knows how to accomplish this using Capybara.
Example: <img src="http://example.com/getrandomimage">
Thing is, src points to a script which returns random image, not to the image itself.
Page is loaded, script is run, image is displayed. I can easily get the src value, but if I access the link to download the image, the script runs again and returns a totally different picture. And I need the one that's already on the page.
I think the process would be very similar using JS or Capybara. I'd break it down into two steps:
Write a selector that will find the <img> tag. In JS that might look like:
myImg = document.getElementByTagName("img")
Call .src on the returned node:
result = myImg.src
I believe Capybara is limited to XPath and CSS selectors. Therefore, depending on the page you are trying to scrape, you'll have to identify some sort of pattern in the HTML tags or the CSS attributes to find the <img> tag.