I am trying to get a popup window that displays a view on top of my main view. I basically want to use the idea that many project management applications use, such as VersionOne and JIRA. In JIRA, under an epic, there is a "Create issue in epic" feature that gives you a popup window that is essentially a form. I am just trying to get the popup window (same size, displays data) to work with AngularJS.
A snippet from my main view where I am linking to the detailed view. I assume the magic will happen in the <a> tag.:
<h6 data-toggle="popover" data-placement="top" data-content="commands">
<a href="partials/instance-view.html">
{{instance.name}}
</a>
</h6>
The secondary view is just displayed in the instance-view.html file. I don't think the <h6> tag is messing anything up, but I could be wrong. Also, I know that since I am trying to display a link inside a popover tag, the popover won't work. I can always fix that later.
Assume you are using bootstrap?
If so, have you tried using the bootstrap popover plug-in inside your tag rather than your ?
i.e. ...
<h6>
{{instance.name}}
</h6>
Modals should be used for what is trying to be achieved. In particular, Bootstrap Modals.
Related
I am making a react js application. Within this application i understand i have a tag inside a tag like so:
<a><a></a></a>
I have located the issue in hand as you can see in these pictures. But I am unable to fix the problem. If anyone could give me a hand i would be very thankful.
The commented out code is where i am having my issue. As you can see i have a Link tag and inside that Link tag i have a Dropdown tag. The Dropdown is causing the issue but it is needed for my application.
Edit:
I understand an a-tag cannot live inside another a-tag, i have tried a few different ways to to get the full use of the dropdown and the link. As you can see in these new pictures i am trying to get the card to be a link to a group while also having a dropdown with two options, Edit and Delete.
This is what the card looks like, the three dots is the dropdown menu. when this card is clicked it brings me to the "/group/manage/" page.
This is what the card looks like with the dropdown menu clicked.
I recommend restructuring your component in a way similar to this:
<Card>
<Link>
{mainContent}
</Link>
<Dropdown>
{dropDownItems}
</Dropdown>
</Card>
Then use CSS to position the dropdown to the top right, on top of the main content.
I spent the last 5 hours trying to get this animation to work with no luck. I wanted to create a cool animation whenver the user click on a button, the idea is to display a list of ul elements in a flip animation, pretty much like what http://lab.hakim.se/scroll-effects/mobile.html is doing (if you selected flip from the gear icon and changed chrome device mode to a mobile device).
Im using ngAnimate along with Angular and Ionic, I created the snippet here http://play.ionic.io/app/4ae65754fc64 (try to click the Add to Cart button). I want to display each li item as if they are flip and cascading whenever they are displayed. For some reason all the animation classed are ignored.
Ok, I think I achieved what you were wanting to achieve. I provided you two demos below.
But first of all the ng-animate directive is not supported anymore in AngularJS >= 1.2. And for ng-show based animations you have to use the ng-hide-add, ng-hide-remove CSS classes not the CSS classes described in the ngRepeat documentation.
The ionic demo (first link below) is basicly just a mockup of your code and is not perfect by any means.
The codepen demo is a bit more modified example and generic example. I used <ion-list> and <ion-item> instead of <ul> and <li>.
Hopefully this gets you in the right direction when implementing your final solution.
Ionic demo: http://play.ionic.io/app/3c0e90238fe8
Codepen demo (more generic): http://codepen.io/thepio/pen/KMPeZo
I am building an app using Ionic and am utilising the directive <ion-tabs></ion-tabs>
Each tab directive is as standard, eg:
<ion-tab title="Sync" icon-off="ion-android-sync" icon-on="ion-android-sync" href="#/tab/sync"><ion-nav-view name="tab-sync"></ion-nav-view></ion-tab>
When the app is busy syncing I'd like that static "ion-android-sync" to animate.
I see there is <ion-spinner></ion-spinner> to show spinners but I'm not sure of how to show an animated spinner icon inside a tab - anyone know how to do this?
I do not have a definitive solution for you and I am not sure whether this is the best way to do this, but in my opinion the best way to achieve this would be to dissect the <ion-tab> element, which would result in the following:
<a class="tab-item" href="#/tab/sync">
<i class="icon"><ion-spinner></ion-spinner></i>
</a>
Unfortunately, I couldn't find a spinner that looks like the ion-android-sync icon you used. And of course, more code would be necessary to make this switch between icons, but it is a start.
I have the following code that opens up a pop up and displays information returned by the function //showDetails(Data.path)// when we click on the icon.
<a ng-show="Data.path" ng-click="showDetails(Data.path)">
<ng-md-icon icon="info" style="fill: green" size="15"></ng-md-icon>
</a>
I want the data to appear in a md-dialog modal window. Is there an easy way to do that ?
You have to setup a controller which tells $mdDialog what it needs to do when the showDetails(...) function is triggered.
See: https://material.angularjs.org/latest/demo/dialog (Click "View Source" <> icon, and then switch to the "JS" tab to see an example of controller code to use; or just go straight to the Codepen).
If you are using ng-include for your modal, remember Angular creates a new child scope for it. You can acess the data in the modal using the following in your modal HTML:
{{$parent.Data.path}}
I am trying to use hover to show dropdown / popover and use data-container="self" to make the dropdown / popover stay appear when mouse moved to it. This method works on Google Chrome but not on Firefox.
Example Code:
<button type="button" data-placement="right" data-trigger="hover | click" data-delay="300" bs-dropdown="dropdown" data-container="self">Click to toggle dropdown</button>
How can I get it works on firefox?
I never heard of the self keyword as the container parameter in angular-strap. Where does it come from?
Anyway, here, container is useful if you want to append the dropdown to another element. Since it does not seem to be your case, simply do not provide data-container, and the dropdown will be appended to the element itself.
EDIT:
Okay, so, I tried, and saw the problem you are describing. You could try the solution given here (https://stackoverflow.com/a/21293850/4506790): add a specific class to your button, and give it in data-container.
<button type="button"
class="dropdown-btn"
data-placement="right"
data-trigger="hover"
data-delay="300"
bs-dropdown="dropdown"
data-container=".dropdown-btn">
Hover to toggle dropdown
</button>