I'm having some issues with ng-style. Here's the code I have at the moment
ng-style="{'background-image': 'url(http://s3-us-west-1.amazonaws.com/'+ event.image2)'}"
The above isn't working, (I have had to remove the bucket name for reasons), but the code works if I have it like this:
ng-style="{'background': 'orange'}"
This is displaying fine. Why is the URL method not working?
You can write like this instead on the element:
<div style="background-image: url('http://s3-us-west-1.amazonaws.com/{{event.image2}}')"></div>
I guess event is a variable in your scope, in that case it's just a small typo:
ng-style="{'background-image': 'url(http://s3-us-west-1.amazonaws.com/' + event.image2 + ')'}"
Related
I am getting iframe url from server. after i receive that, i am setting to `iframe' as like this:
<iframe ng-src="{{video}}" frameborder="0"></iframe> //without quote
But not working at all. in case if I hard-code the same value it's working fine. even i have tried like this:
<div class="content">
{{video}} //i am getting path correctly
<iframe ng-src="{{'video'}}" frameborder="0"></iframe>
</div>
what is the issue here?
I am gettting this error :
http://errors.angularjs.org/1.4.9/$interpolate/interr?p0=%7B%7Bvideo%7D%7D&p1=Error%3A%20%5B%24sce%3Ainsecurl%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.9%2F%24sce%2Finsecurl%3Fp0%3Dhttp%253A%252F%252Flivecam.mktimelapse.com%252Fkhalifa-stadium2
This happens because of security policy imposed from angular 1.2.
Try to make your link trustable
Like this
add module ngSanitize
var app=angular.module("app", ['ngSanitize']);
then inject $sce in your controller
function MyController($scope,$sce) {
Then make your link trustable
$sce.trustAsResourceUrl(video);
DEMO
I tried to translate project oppia.org
The code (angularJs, in template) has some things - <[stateName]>, I dont understant its construction <[]>. is It a variable? or is it a directive? is It a scope? Where is its value?
Code:
<h4 ng-if="!stateNameEditorIsShown" ng-click="openStateNameEditor()" class="oppia-editable-section">
<[stateName]>
<span ng-if="editabilityService.isEditable()" class="glyphicon glyphicon-pencil oppia-editor-pencil" title="Edit State Name"></span>
</h4>
Since jinja2 and angularjs both want to use {{ and }} for interpolation, one of them has to give. It's unclear from this example if that's angularjs or jinja2. If you explore the code you're translating, and find something like
$interpolateProvider.startSymbol('<[');
$interpolateProvider.endSymbol(']>');
then it's angularjs code that's using the alternative binding markers.
Edited to add:
See https://code.google.com/p/oppia/source/browse/core/templates/dev/head/app.js lines 38-39. That's where angularjs is being configured to use alternate binding markers.
I found it!
In file feconf.py:
DEFAULT_INIT_STATE_NAME = 'First Stage'
Neither. This is the alternative interpolation markup that your oppia.org code has been configured to use. I guess one of your programmers didn't like the default {{...}} mustache syntax and they went with <[...]> instead. The value will come from the same place as with the standard {{...}} markup.
Find this in your code and it will make more sense:
oppia.config([ "$interpolateProvider","$httpProvider",
function(a,b){
a.startSymbol("<[");
a.endSymbol("]>");
... ... ...
API doc on $interpolateProvider https://docs.angularjs.org/api/ng/provider/$interpolateProvider
Hope this helps.
I've checked the docs and the ng-href not working thread on here already but I'm stumped.
Does ng-href require a full path? Mine currently looks like <a ng-title="{{title.text}}" ng-id="{{id.num}}" ng-href="/page.php#param:{{id.num}}"><span>go here</span></a>, but when I click on it, while it changes the URL in the address bar of the browser correctly (and it's a legitimate URL; I can hit "enter" in the address bar and it will "go there"), it does not actually GO TO that page.
What's going wrong? Do I need to combine this with an ng-click of some sort? And if so, why?
UPDATE: The link is going to the same page from which it is being called, but with a different parameter for a different data record display. I think that may have something to do with it ...
The simplest way to do this is adding target="_self", in your case this is the solution:
<a ng-title="{{title.text}}" ng-id="{{id.num}}"
ng-href="/page.php#param:{{id.num}}" target="_self">
<span>go here</span>
</a>
No ng-click and no AngularJS function are required.
Here is how I ended up solving this one:
Template:
<a ng-title="{{title.text}}" ng-id="{{id.num}}" ng-click="go_to_item(id.num)">
<span>{{title.text}}</span>
</a>
Javascript:
$scope.go_to_item = function(display) {
window.location = '/page.php#id:' + display;
location.reload();
};
This is working as it should in our app. Why the Angular-specific $location and $window don't work there is a mystery to me, though. I tried those first and they didn't do it, so if anyone can explain why, I'll give you "accept answer" for this question! ;-)
I tried your code and it worked for me:
<script>
$scope.title = {text: "test"};
$scope.id = {num: 123};
</script>
<a ng-title="{{title.text}}" ng-id="{{id.num}}" ng-href="/page.php#param:{{id.num}}"><span>go here</span></a>
becomes like this:
<a ng-title="test" ng-id="123" ng-href="/page.php#param:123" href="/page.php#param:123"><span>go here</span></a>
I had this problem earlier. I was not allowed to have ng-href inside of a ng-controller for some reason.
I want to set an image dynamically having the path of the image setted in a scope. The problem is that this is seen as a text, the value of selectedEvent.eventBannerImage is shown correctly, in my case the final url looks something like this:
background-image: url('/mydomain/images/banners\444b6e91-30fe-478b-a3d3-7984f0d35e69__1253402730_2873_full-269x300.jpg'), but it doesn't appear like a link as I need but just as a text. The image isn't shown.
<div style="background-image:
url('${pageContext.request.contextPath}/images/{{selectedEvent.eventBannerImage}}')">
please see here: http://jsbin.com/zehawu/1/edit
ng-style="{'background-image':
'url({{pageContext.request.contextPath}}/images/{{selectedEvent.eventBannerImage}})'}"
You will need to use a directive for the binding -- probably ng-style. Unfortunately, ng-style takes an expression, not a string, so you can't use concatenation inside of it.
<div ng-style="ctrl.bgImage">
// In the controller:
this.bgImage = {"background-image":
"url(" + this.pageContext.request.contextPath
+ "/images/" + this.selectedEvent.eventBannerImage + ")"
};
I'm trying to use a tag like this:
<a ng-click="$location.path('/restaurant/{{restaurant._id}}')">{{restaurant.name}}</a>
However, nothing happens when I click the tag.
Oddly, if I hard-code the value there, like this:
<a ng-click="$location.path('/restaurant/512ad624b67fe1f446709331')">{{restaurant.name}}</a>
it works as expected.
Screenshot of the DOM:
Why would this be? How could I work around this?
From AngularJS ng-click not invoked with {{$index}} used, you are able to use the variable directly, without braces.
I.e.
<a ng-click="$location.path('/restaurant/' + restaurant._id)">{{restaurant.name}}</a>
Hope this helps!
$scope.doTheNeedful = function(country){
var newPath = "home/";
newPath += country;
$location.path(newPath);
}