I need to include a script that has a session ID in the URL (I wouldn't normally do this, but I'm using Crocodoc to embed documents into the page and they don't seem to have another way of doing it without using an iFrame which isn't customizable):
<!--sets a global variable "_doc" that is needed for initialization-->
<script src="//crocodoc.com/webservice/document.js?session=tohY5vh3dPjUbmW6_imSQFshvQUsJ3fuJFyG7CxBU-E3AArTbELI3U0bSJBm6z5ZKtXpJQCnJ-EU1J2WGbuu6WH4e3Bglcy38TplHg"></script>
I tried simple things like:
<script ng-src="//crocodoc.com/webservice/document.js?session={{ file.crocodoc_session }}"></script>
This writes the tag out fine, but the script is never requested. I also tried using just "src" instead of "ng-src" but that makes a request with "{{ file.crocodoc_session }}" in the URL, and doesn't make another request once the session ID value is actually written.
The last thing I tried was to make a directive with a compile function, in which I use jQuery to set the src attribute. That worked, expect that I couldn't figure out how to pass the session ID to the compile function. I used a "session" attribute on the element, but when I pass a variable (or use session="{{ file.crocodoc_session }}") I get the variable name as a string instead of it's value.
Try evaluating the link inside the controller, assigning it to a scope variable and then referencing it in the ng-src.
Related
Could you explain me how to use Lodash _.template in order to get some value from script to .html file via {{data}} ?
For example:
In script.js I set some changes to my data object and in view.html. I want to get changed data with {{data}}
How to use lodash _.template() for this issue?
The lodash template function does not allow you to build templates from files (but you could do it when combined with Webpack). It has absolutely nothing to do with AngularJS templates. However in some situations it makes sense of using inside of AngularJS, like for example building a list of strings with a pattern or the like.
You compile a template string to a function you can call as often as you like with the values:
const executor = _.template("Hello <%= name %>, my old friend!");
console.log(executor({name: 'Alice'})); // Hello Alice, my old friend!
console.log(executor({name: 'Bob'})); // Hello Bob, my old friend!
You can also use conditional, loops, etc.: https://lodash.com/docs/4.17.15#template
In my application i am passing parameters for controller and read it using javascript as below.
localhost:8080/app/conroller#parameter=value
now problem is if i open my conroller in url and than append #parameter=value than only it works.
but i want to put whole link in anchor tag.
and when i click outside application than it automatically reroute localhost:8080/app/conroller and don't accept parameters.Although when opening that url if i apped #parameter=value* part than it works perfect.
i am using html5mode = true.
i search lots of document but didnt find right solution for this.
Not exactly sure if I get what you are asking but I think this is what you are getting at:
href="/app/conroller#parameter=value" target="_self"
Try adding the target self.
If that doesn't work you could try setting a base url <base href="/"></base>
You could try using ? for the query parameter instead of the #
I have a set of files in a server which I am looping though and constructing a JSOn and saving it as a separate file. I am using python for this. Works quite well. Now the scope is the number of files in the directory will increase/ change throughout the day..and I am running the script every 10 min to rewrite the json...the file name stays same and i am calling it in a single page html document using angular.js..Again fairly simple...But now I am having problem when the JSON is changing I am not seeing any change on the page unless I reload the page. Could I do something about this?
With angular I am using
$http('something.json').success(callback function with some argument data)
and in the markup something like
<ul>
<li ng-repeat="x in data">{{x.id}}</li>
</ul>
Your call to $http is one-time operation which happens after page load like this:
$http('something.json').success(function(data){
$scope.data = data;
});
angular is kickstarted
ng-controller containing $http request is evaluated and request for 'something.json' is sent
...
when your json arrives, your success function is called with data from json
view (html template) is updated with new data
Angular keeps your model (eg $scope.data) and UI (expressions in template) up to date, but it doesn't update external resources.
If you want to periodically poll for changes in 'something.json'
you can use $timeout service as suggested in JaKXz's comment.
I am adding images to divs with ng-repeat which works fine. The image location data is nested in an array. The images show up as expected. My partial looks like:
<div class="image-wrapper">
<img src={{item.user.img_src}}>
</div>
However, it appears the page is to attempting to retrieve the string before AngularJS is loaded. I get the following console warning:
GET http://localhost:3000/%7B%7Bitem.user.img_src%7D%7D 404 (Not Found)
How do I prevent this?
The src attribute is buggy when Angular markup is used. Use ngSrc instead of src.
Thus, <img ng-src="{{item.user.img_src}}">
When the browser first loads the page it sees your src exactly as you wrote it. It's not until Angular loads and processes the page that it updates your dynamic source. Neither of these is what you want to have happen (especially since you could accidentally create the bad empty src attribute). Instead, use ngSrc directive so that no src will be set until Angular has evaluated your expression:
http://docs.angularjs.org/api/ng/directive/ngSrc
I have a backbone.js CMS of sorts, that accepts html and then renders it in the browser. The following is the template file (in .hamlc) that renders the backbone page object.
%h1.text= #page.get('title')
.text.page-content!= #page.get('content')
This works fine, until I have a <script> tag. I have a script tag for a widget (below)
<script src='http://www.opentable.com/frontdoor/default.aspx?rid=52900&restref=52900&bgcolor=8AA86B&titlecolor=0F0F0F&subtitlecolor=0F0F0F&btnbgimage=http://www.opentable.com/frontdoor/img/ot_btn_black.png&otlink=FFFFFF&icon=light&mode=short&hover=1'></script>
This widget uses document.write (which you can see if you look at the source). First, when I load the page it doesn't show anything (I've tested the widget in an html file by itself and it displays their normal god-awful ). When I inspect the element, it looks like the script tag was removed.
However, when I test with the following:
<script type="text/javascript">
alert(0);
</script>
It runs. Still nothing in the inspector though.
Finally, testing with the following:
<script type="text/javascript">
document.write('test');
</script>
It also runs. However, it completely destroys the page content and just shows 'test'.
According to this article about using document.write for widgets, it says it can't be run after the page load. I'm assuming that's what's happening here is that document.write is being run after page load and destroying all the content, given that's the technique backbone.js uses (appending/replacing elements in the DOM once the page is loaded).
How can I make my Backbone.js CMS accept script tags with document.write widgets without either not showing anything or destroying the entire page?
I cannot reproduce it, the template renders as it should:
$ coffee
coffee> hc = require './src/hamlc'
{ compile: [Function],
template: [Function],
__express: [Function] }
coffee> template = hc.compile ".text.page-content!= #content"
[Function]
coffee> template(content: 'Hello <script>Script</script>')
'<div class=\'page-content text\'>Hello <script>Script</script></div>'
and the script tag is persisted. Do you have the latest version installed?
You're calling document.write after the page has been loaded, so it'll overwrite the whole page. You could try putting the script tag in an iframe, or monkey patch document.write to behave differently after the page has been loaded. See the top answer on this question:
Dynamically added JavaScript overwrite the html page view (not the code)
If I understand correctly, you're trying to include the script tag for the widget inside a template, which means it's being inserted after the initial DOM is ready. That won't work for the reasons you mentioned; when the script executes, it will replace everything in the DOM.
You need to load the script before the initial DOM is complete, that is either in <head> or at the beginning of <body>. That in turn means that you have to include the script tag in your initial HTML as delivered by the server rather than trying to dynamically generate it client-side.