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
So in my angular view I have this:
<div id="submenu" ng-include="'/submenu.html'" ></div>
But when I visit the page, the HTML part is:
<!-- ngInclude : '/submenu.html' -->
I put this line of code in other pages and it renders correctly. Only on one page it gets commented out.
What should I do, how can I fix this? I never saw this bug before.
Thanks
edit
I just checked and the code does not even perform a GET for this particular html file.
edit
I just remove the complex parts out of the age and now is just
<div id="submenu" ng-include="'submenu.html'" ></div>
<div id="anothersubmenu" ng-include="'anothersubmenu.html'" ></div>
and no one of these files render, they both get commented out. My controller looks normal. I view this on Chrome 49.0.2623.87 m. All the included files have the same id , everywhere I include them. All the files are in the same folder.
I dont know is there a limit on the ng-include?
Thanks
I had the same scenario but I created the ngInclude element using
angular.compile and I also got
<!-- ngInclude : '/file.html' -->
and I did not see any requests going out from my browser to get the file
Finally I resolved the issue using the
scope.$apply()
The digest cycle had to happen before the actual including can take place.
hope it helps :)
I working on angularjs+rickshaw. I made simple example from Angularjs+Rickshaw. They are making ufo sighing. I made the same example.
<h3>UFO sightings in 2008 </h3>
<div ng-repeat="sighting in sightings">
{{sighting.reportedAt.$date}}
</div>
<rickshaw-chart></richshaw-chart>
Following is working model. Plunker working Model. Directive is printing `this is the rickshawChart directive' But this statement is replaced by List of UFO with in second. Why this is happing like that
Second if I change the position of <rickshaw-chart></richshaw-chart> then It will will print only statement but not show the list. Why this is happing like that
<h3>UFO sightings in 2008 </h3>
<rickshaw-chart></richshaw-chart>
<div ng-repeat="sighting in sightings">
{{sighting.reportedAt.$date}}
</div>
See the demo Not working correcly
You have a typo in your element closing tag
</richshaw-chart>
Should be
</rickshaw-chart>
Angular is not finding the proper closing tag and therefore not able to compile the dom correctly. The second demo works fine with this corrected
In the first your directive is not replaced it is still there but it has been pushed to the bottom of the page when your JSON is loaded. Th delay is just the time it takes for you $http call to complete.
This tutorial demonstrates the use of the directive ngSrc instead of src :
<ul class="phones">
<li ng-repeat="phone in phones" class="thumbnail">
<img ng-src="{{phone.imageUrl}}">
</li>
</ul>
They ask to:
Replace the ng-src directive with a plain old src attribute.
Using tools such as Firebug, or Chrome's Web Inspector, or inspecting the
webserver access logs, confirm that the app is indeed making an
extraneous request to /app/%7B%7Bphone.imageUrl%7D%7D (or
/app/{{phone.imageUrl}}).
I did so and it gave me the correct result:
<li class="thumbnail ng-scope" ng-repeat="phone in phones">
<img src="img/phones/motorola-xoom.0.jpg">
</li>
Is there a reason why?
From Angular docs
The buggy way to write it:
<img src="http://www.gravatar.com/avatar/{{hash}}"/>
The correct way to write it:
<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>
Why? this is because on load of page, before angular bootstrapping and creation of controllers, browser will try to load image from http://www.gravatar.com/avatar/{{hash}} and it will fail. Then once angular is started, it understands that that {{hash}} has to be replaced with say logo.png, now src attribute changes to http://www.gravatar.com/avatar/logo.png and image correctly loads. Problem is that there are 2 requests going and first one failing.
TO solve this we should use ng-src which is an angular directive and angular will replace ng-src value into src attribute only after angular bootstrapping and controllers are fully loaded, and at that time {{hash}} would have already been replaced with correct scope value.
<img ng-src="{{phone.imageUrl}}">
This gives you expected result, because phone.imageUrl is evaluated and replaced by its value after angular is loaded.
<img src="{{phone.imageUrl}}">
But with this, the browser tries to load an image named {{phone.imageUrl}}, which results in a failed request.
You can check this in the console of your browser.
The src="{{phone.imageUrl}}" is unnecessary and creates an extra request by the browser. The browser will make at least 2 GET requests attempting to load that image:
before the expression is evaluated {{phone.imageUrl}}
after the expression is evaluated img/phones/motorola-xoom.0.jpg
You should always use ng-src directive when dealing with Angular expressions. <img ng-src="{{phone.imageUrl}}"> gives you the expected result of a single request.
On a side note, the same applies to ng-href so you don't get broken links till the first digest cycle kicks in.
Well actually it makes 100% sense because HTML gets processed sequentially and when this HTML page is being processed line by line, by the time it gets to this image, the line and processing the image, our phone.imageUrl is not yet defined yet.
And in fact, Angular JS has not yet processed this chunk of HTML, and hasn't yet looked for these placeholders and substitute these expressions with the values. So what ends up happening is that the browser gets this line and tries to fetch this image at this URL.
And of course this is a bogus URL, if it still has those mustache and curly braces in it, and therefore it gives you a 404, but once of course Angular takes care of this, it substitutes this URL for the proper one, and then we still see the image, but yet the 404 error message remains in our console.
So, how can we take care of this? Well, we can not take care of this using regular HTML tricks. But, we can take care of it using Angular. We need somehow to tell the browser not to try to fetch this URL but at the same time fetch it only when Angular is ready for interpretation of these placeholders.
Well, one way of doing it is to put an Angular attribute on here instead of the standard HTML one. And the Angular attribute is just ng-src. So if we say that now, go back, you'll see that there's no errors anymore because the image only got fetched once Angular got a hold of this HTML and translated all the expressions into their values.
How can I show a spinner or loader gif animation while route is changing from one to another.
I am using ng view like as follows:
<div ng-view class="view-animate">
</div>
I am loading templates from server and also inline. While the HTTP request is pending I need to show the spinner/loader... any snippets?
You can show and hide the loader when location change starts and is completed, respectively.
Here is a plunkr that I have created for this situation. This uses ui-router and is taken from one of the apps that I have created, so it may not be useful as-is, but it will give you an idea on how to approach the problem.
HTML Code inserted below just to keep SO happy...
<ui-view class="view"></ui-view>
<div loader="" class="ng-hide"></div>
I hope it helps.
Abhi.