I am trying to put href link to slider images and text in ion-slide.
Here is the code of mine.
<ion-slide-box ng-show="!cloading">
<ion-slide ng-repeat="img in simgs">
<div class="box">
<a ng-href="#/menu/tab/featured-post/{{post.id}}" style="text-decoration:none;">
<img src="{{img.url}}" ></img>
<p class="prodblk2" ng-href="#/menu/tab/featured-post/{{post.id}}" >
{{img.title}}
</p>
</a>
</div>
</ion-slide>
</ion-slide-box>
The link is appearing, but its not working when I click on it. I guess, the ion-slider properties like sliding or dragging overriding the mouse actions.
I tried ng-href and even ng-click by adding some JS function.
I hope nothing wrong about the code. I think, I need to add some property to the ion-slide tag.
I searched for similar questions but I haven't found. If anybody knows it please help me.
Thanks in advance.
I end up with the same problem as you, my solution was to use ng-click on the ion-slide directive, because in there it will fire up.
So you can create a method, pass the id's you need as parameters and then handle the route in the controller. Here's my solution for your problem:
HTML:
<ion-slide-box ng-show="!cloading">
<ion-slide ng-repeat="img in simgs" ng-click="slideClick({{post.id}})">
<div class="box">
<a style="text-decoration:none;">enter code here
<img src="{{img.url}}" ></img>
<p class="prodblk2 >
{{img.title}}
</p>
</a>
</div>
Then create some method on your controller using $location to go to your URL.
JS:
$scope.slideClick = function(postId) {
$location.path("/menu/tab/featured-post/" + postId);
}
Related
Im working on a project where I want to use a carousel to display some different content. I will not create the slides dynamically using an ng-repeat, this is because I have to move some of the content from other parts of the DOM into the slide.
I want to have some links with title connected to each slide, so if I click that link it should scroll to that slide. I have managed to do this, but the sliding behaviour is not as expected. Here is a plunker in which the weird behaviour is displayed: http://plnkr.co/edit/oZrLzRaLb5cAmMBnz4p0?p=preview
<div ng-controller="CarouselDemoCtrl as car">
<a ng-click="car.active = 0">Slide 1</a>
<a ng-click="car.active = 1">Slide 2</a>
<a ng-click="car.active = 2">Slide 3</a>
<uib-carousel ng-model="" active="car.active" interval="0" no-wrap="true" no-transition="false">
<uib-slide index="0">
<div style="background:blue; height:600px;">
Some content in here
</div>
</uib-slide>
<uib-slide index="1">
<div style="background:red; height:600px;">
Some content in here as well
</div>
</uib-slide>
<uib-slide index="2">
<div style="background:green; height:600px;">
Some cool content in here
</div>
</uib-slide>
</uib-carousel>
</div>
Any thoughts of why this happens, and how I can solve it?
Note: Im using angular 1.5.0 and ui-bootstrap 1.2.4
Best regards,
Daniel
have you install ng animation,
or you don't want to sliding you could edit the transition="true" to disable it
<uib-carousel ng-model="" active="car.active" interval="0" no-wrap="true" no-transition="true">
https://github.com/angular-ui/bootstrap/issues/5601
Issue seems to be in the angular-ui code itself;
In the $watch of 'active' "currentIndex = index;" is set before "self.select(slides[index]);" is run, by moving it down after it it'll work
So I'm writing a thumbnail display using the Bootstrap css template.
<div class="col-xs-6 col-md-3">
<a href class="thumbnail" data-ng-repeat="(key, value) in vm.photosOfUser" ng-click="vm.doStuff($index)">
<img data-ng-src="data:image/png;base64, {{value}}" data-err-src="./images/icon.png"><!--alt="{{key}}"-->
</a>
</div>
The images are being displayed perfectly. However, when I click each image link, nothing happens. I know it's kind of tricky dealing with ng-repeat with ng-click. I'm new to Angular so I was wondering if anyone could help :)
Thanks in advance!
I'm working on a project where the client has supplied a pile of html where I need to plugin the data from our database and have hit a problem that I'm finding difficult to solve....
So first problem is with routing
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information collapse">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
he has supplied some javascript to handle the click on class-overview
$('.class-overview a').on('click',function(e) {
e.preventDefault();
});
$('.class-overview').on('click',function() {
$('.class-overview.active').removeClass('active').next('.class-information').collapse('hide');
$(this).addClass('active').next('.class-information').collapse('show');//.css('top',offset).collapse('show');
});
and i have a line like this in my state provider
// default route
$urlrouterProvider.otherwise("/")
So the problem is that the ui-router handles the click and sends me back to the home page.
The ideal solution is to leave as much of his markup intact, so can anyone tell me how I stop ui-router handling the click?
or failing that, how I might use ng-click and ng-show to get the same effect, i.e. hiding and showing the class-information div...
If I understand well your question, you want to display the .class-information div when you click on the .class-overview element.
That can be done by using a variable in a ng-show like this:
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#" ng-click="display = !display">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information" ng-show="display">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
The display variable will be falsy when you land on the page, therefore the ng-click will be executed, this variable will be set to true.
I see that you are using a collapse class to hide the content if it is collapsed. Then you could use angular ng-class to put the collapse class when the display variable is false. Your div.class-information would look like this:
<div class="class-information" ng-class="{collapse: !display}">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
I am having some issues adding a hyperlink to a 'hcard' in ionic. I am using the following plugin (https://github.com/drewrygh/ionic-ion-horizontal-scroll-cards) and the codepen is here: http://codepen.io/drewrygh/pen/jEJGLx
When I try to add hyperlink to hcard nothing happens. What is the best way to do this, does anyone know?
<div ng-controller="barsCtrl">
<h4>Top Rated Bars</h4>
<hscroller>
<hcard ng-repeat="bar in bars" index="{{$index}}" desc="{{bar.name}}" image="{{bar.profile_pic}}">
</hcard>
</hscroller>
</div>
Do you mean you want the cards to link to something as an anchor tag? You can wrap the cards in an anchor tag: http://codepen.io/anon/pen/Nqvjpv
<a ng-repeat="item in items" href="http://www.google.com?q={{item.desc}}" target="_blank">
<hcard index="{{$index}}" desc="{{item.desc}}" image="{{item.image}}"></hcard>
</a>
So I have some HTML that I do not control.
<div id="myDiv">
Stuff inside my div...
</div>
I want to add an ngClick to it. If I could control the html, I would just do this
<div id="myDiv" ng-click="doSomething()">
Stuff inside my div...
</div>
But like I said, I can't change the html. If this was jQuery, I would just do
$('#myDiv').click(function(){
doSomething();
});
How do I do this in Angularjs? Thanks.
UPDATE
Judging from the downvotes, it seems like you guys are not happy with what I am trying to do here, so let me explain.
I am using AngularUI in my app. AngularUI has all these templates that they insert. For example
<accordion-heading></accordion-heading>
becomes
<div class="panel-heading">
<h4 class="panel-title">
<a href="" class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading">
<span class="ng-binding ng-scope">Heading</span>
</a>
</h4>
</div>
I want to add ngClick to "panel-title". I COULD overwrite the template and add it, but I don't want to do that. Coming from jQuery, it makes sense to just listen to a click event on "panel-title". How it is done Angular? Thanks.
You need to find the element, smth like: angular.element(//selector here); then add attribute you need(ng-click), .attr('ng-click', '//whatever should be here'), and then compile it with angular $compile.
But. I feel sad that you have to do this, I hope you'll find a possibility to change html.
Docs for compile