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);
}
Related
I am trying to print the value of merchant.merchant_url for my inAppBroswer call. I have looked at the recommended javascript to parse using the A tag at the blog by Nic. https://www.thepolyglotdeveloper.com/2014/12/open-dynamic-links-using-cordova-inappbrowser/
However, this impacts my other links on the app that I do not need to open in the InAppBrowser. Can someone please recomend how can I print this url value? I tried ng-href as well but then the opened site takes over the app and there is no way to exit.
I have also tried using ng-click as suggested here How do I open inAppBrowser using Angular JS?
But this doesn't help either. I know for a fact that merchant.merchant_url has value because i can print it outside my a href. However I having trouble getting it in single quotes for the execution. I have tested non-dynamic links and they work fine in the app. Stripped off < > for the so that the code is readable.
a class="item" href="#" onclick="window.open('{{merchant.merchant_url}}', '_blank', 'location=yes'); return false;"
View
/a
Past this code your controller:
$scope.urlOpen = function(url) {
console.log(url);
window.open(url, '_blank', 'location=yes');
};
and change in your view:
<a class="item" href="#" ng-click="urlOpen({{merchant.merchant_url}})">View </a>
Most of the code posted by xuser is ok. Except that merchant.merchant_url has to be in single quotes.
urlOpen('{{merchant.merchant_url}}')
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 + ')'}"
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.
How do I ensure that a directive gets compiled after getting dimensions of the container it is in?
Since there is no plunker/fiddle provided, this is an another guess :)
Try putting the new element into DOM before compling like this:
var newelem = '<div d3-bars bar-height="20" bar-padding="5"></div>';
newelem = angular.element(newelem);
element.append(newelem);
$compile(newelem)(scope);
That is in order to allow the new element to have width and height before get compiled.
I would guess, that you forgot to assign your scope variable. Just try $scope instead if you're in a controller.
Another possible apporach would be, to toggle a boolean variable with your button and use ng-show for your D3 code like this:
<button ng-click="showD3 = != showD3">Click me!</button>
<div d3-bars bar-height="20" bar-padding="5" ng-show="showD3"></div>
I am using the ng-src directive in order to avoid the browser to request the image before Angular evaluate the expression.
ng-src={{image}} will update the src attribute of the image if the expression "image" change.
I misunderstand why the ng-src directive doesn't update the path of the image if the expression ("myImage.png") become empty ("").
When the expression become empty, the ng-src attribute become empty but the src attribute still the last known src. So it doesn't update the image. Why the src attribute isn't updated (to an empty src) so that the image "disappear".
Here is a plunker
Thanks
The answer to this is in the Angular code. It's not a bug, it's just the behavior they decided they wanted. Starting on line 13895, you can see this directive code:
forEach(['src', 'srcset', 'href'], function(attrName) {
var normalized = directiveNormalize('ng-' + attrName);
ngAttributeAliasDirectives[normalized] = function() {
return {
priority: 99, // it needs to run after the attributes are interpolated
link: function(scope, element, attr) {
attr.$observe(normalized, function(value) {
if (!value)
return;
attr.$set(attrName, value);
if (msie) element.prop(attrName, attr[attrName]);
});
}
};
};
});
The key is in:
if (!value) return;
So as you can see, if you change the ng-src expression to an empty string, this will never change the actual src value. You can get around this doing something MadScone suggested.
MadScone's suggestion is a cool idea, but it didn't work for me in all browsers. I ended up just showing the element only when the src isn't empty:
<img ng-show="theImage!==''" ng-src="{{theImage}}">
This seems like the safest option to me after reading through the thread that MadScone referenced (here). As a number of people pointed out there, the accepted answer doesn't work in all browsers and has some other issues that could arise. Simply hiding the element avoids all that.
Update:
As enpenax pointed out in the comments, the !=='' in the ng-show is totally unnecessary. Here's the cleaner version:
<img ng-show="theImage" ng-src="{{theImage}}">
Update (April 2015)
See developering's answer, apparently this method I suggested originally may not work in all browsers.
Original (February 2014)
I'm not fully sure why that's happening, but here's a way of solving it anyway. Add this function to your controller:
$scope.getImage = function(src) {
if (src !== "") {
return src;
} else {
return "//:0";
}
};
The "blank" image will get a source of //:0 which won't cause a missing image icon to appear (see the top answer on this thread).
Then you can set your source using:
<img ng-src="{{getImage(superImage)}}" />
EDIT:
Actually, it would be easier to change your button click to this:
<button ng-click="superImage = '//:0'">Remove superImage</button>
Then there's no need for the function. Although I think the function method is better.
Another short way of solving it:
<img ng-src="{{image?image:' '}}" />
fix it by set value = " ";
with whitespace.
I also add the following css to make sure it's not displayed.
img[src="_"]
display none !important
the real reason has been discussed here: https://github.com/angular/angular.js/issues/1218
ng-hide and ng-show can help you solve it
<img ng-src="{{Image}}" ng-hide="Image == null" ng-show="Image != null" ng-click="ChooseImage()" width="100%" />
$scope.Image = null;
or
<img ng-src="{{Image}}" ng-hide="Image === ''" ng-show="Image !== ''" ng-click="ChooseImage()" width="100%" />
$scope.Image = '';
<img data-ng-src="{{image || 'http://www.1x1px.me/FFFFFF-0.png'}}" data-ng-model="image">
You can choose any 1x1px image that suitable to your website and replace http://www.1x1px.me/FFFFFF-0.png of your own. For my website I use available image on http://www.1x1px.me.
P/S: No need to worry about the original src attribute of img tag because it's not affected to image model
A possible workaround to empty ng-src can be found here.
<img ng-src="{{image || '//:0' }}" />
Detailed explanation to use //:0 can be found from this answer.
To summarize:
It adopts the current protocol, omits the hostname and sets the port to zero, which is invalid and should be killed by the network layer.
Also instead of emptying ng-src, if you have a default image source then you can simply set the ng-src to that default src when ng-src have to be empty.
<img src="{{superImage}}" />
This works as expected
Edit:
Other work arround,may be you could have used and empty string.
ng-click="superImage = ' '
to make it empty. It does not trigger 404