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 have implemented a controller using typescript and angular js and getting data in response as well but there is some problem when i am trying to bind that data with my grid.I have used ng-repeater for it.
I have declared my controller on html page as :-
ng-controller="CustomerCtrl as custom"
And i am trying to access it in my controller as :-
ng-repeat="cust in custom.cust_File
and than
Full Name: {{cust.Name}}
I don't know where the problem exactly...
I solved this by using cust in custom.$scope.cust_File as described by #hugues Stefanski.
Thanx a lot....
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 am trying to use a video player (the jwplayer) inside my AngularJS project. This post consists with 2 parts: part 1 for background, part 2 is my question. Thanks.
PART 1: Solving the "Error loading player: No playable sources found" problem.
At first the video is not showed, just a black rectangle on the page ui, and a quite misleading console message saying "No suitable players found and fallback enabled".
Hours later I happened to change the jwplayer size configuration from "height:450, width:800" to "height:'100%', width:'100%'". This time jwplayer shows a message on the page ui: "Error loading player: No playable sources found".
That gives me direction. My jwplayer usage looks like this:
<!-- this is my index.html -->
<div id="jw_container">Loading the player ...</div>
<script>
var player = jwplayer("jw_container").setup({
file:"{{model.my_video.video_url}}",
......
Change that file line to a hardcoded absolute video url will work, indicating that is the real problem. So eventually I got:
file: angular.element(document.getElementById('ng-wrapper')).scope().model.my_video.video_url,
and then problem solved, for now. (But still ugly, not intuitive, in my opinion.)
================================ SEPARATOR ===================
PART 2: My real question
Coming from the world of traditional template engines, one might tend to use {{...}} wherever he wants. But in AngularJS, situation is different.
Besides the above example, this is another example bit me before:
<img title="{{my_title}}" src='logo.png'> <!-- This works -->
<img src="{{my_image}}"> <!-- This doesn't. Use ng-src instead. -->
So in general, when and when not to use {{...}} inside the AngularJS view file?
Only for Part 1: If you're working with jwplayer and Angular then I highly recommend calling jwplayer from Angular as opposed to the other way round (what you're doing).
e.g.
myModule.controller('MyController', function ($scope, stuffINeed) {
jwplayer.key = "myKey";
jwplayer("myElement").setup({
file: "MyFileName"
});
As long as jwplayer.js has been loaded (link in index.html or use something like require.js) you're good to go!
Wrap the Jw Player as a Directive. You can use something like this: https://github.com/ds62987/angular-jwplayer
Trying to give my own thoughts on this topic.
Rule #1: Never write {{...}} inside AngularJS's <script>...</script> tag. Simply because AngularJS's template system doesn't work in thay way. Instead, use this:
//This is the usage in the view
angular.element(document.getElementById('the_id')).scope().foo
Alternatively, you can define an extra helper in view file:
//This is another usage in the view
function bar(foo) {
//do something with foo
}
and then use your model in a "usual" way via controller file:
//This is inside controller file
function YourCtrl($scope) {
bar($scope.foo);
}
That is it.
Yet I am still not sure when and when not to use {{...}} inside the html part of view. Leave this part to be answered by someone else. (I am now just a new AngularJS learner in week 2.)
Edit : I added test plunker : http://plnkr.co/edit/BMGN4A
Can you provide a full example? Because I write as below but get message Cannot read property 'videoUrl' of undefined although I have $scope.videodata.videoUrl = "bla bla"; in my controller.
<script type="text/javascript">
jwplayer("myElement").setup({
file: angular.element(document.getElementById('myElement')).scope().videodata.videoUrl,
image : "http://i3.ytimg.com/vi/2hLo6umnjcQ/mqdefault.jpg",
autostart : "false",
id : 'playerID',
width: '700px',
height: '400px',
primary : "flash",
stretching : "uniform",
modes : [{
type : 'html5'
}, {
type : 'download'
}, {
type : 'flash',
src : 'player.swf'
}]
});
</script>