I am following the sample code as per this link:
http://angular-ui.github.io/bootstrap/versioned-docs/1.3.3/#/modal
The plunker sample here:
http://plnkr.co/edit/JMV4Hu2x9l9DA9gaGYaF?p=preview
I tried to define a custom template customModal.html using windowTemplateUrl to add a close button (top-right) to the modal box, but the modal dialog won't show properly and I see only dark background and the modal is kind dimmed. Also, the buttons are not responding.
Appreciate if someone could help me define such custom template to allow using close button for all similar modal dialog boxes.
Update: I want to explain why this is not a possible duplicate of this question as suggested. The other question is dealing with "Why we get error when we open the dialog when we specify the template only". In this question, I the template is not showing proper even though I followed the instruction to implement it.
Tarek
in your script template add
<div class="modal-header">
<button type="button" class="close" data-dismiss="dialog" data-ng-
click="cancel($event)">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4>Title</h4>
</div>
Related
I have a tooltip on a save button, when the button is disabled (e.g. invalid data is entered), I want to show a tooltip and then after some delay make it disappear. I use
tooltip-is-open to open the tooltip, but then I dont know how to close it. I tried
tooltip-popup-close-delay but that needs a close trigger.
Here is a simple version of the code:
<button ng-disabled="$ctrl.isInvalid">
<span
class="glyphicon glyphicon-save"
uib-tooltip="Some message"
tooltip-enable="$ctrl.isInvalid"
tooltip-is-open="$ctrl.isInvalid"></span>
Save
</button>
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 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.
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>
I've been using ionic's angular framework to create a comment list and a comment input box on the bottom of a mobile web page. I am trying to set up a function so that if a user clicks on the comment box or button it throws up a login modal before letting them comment/continue. I ended up disabling the input initially so that it doesn't bring up the keyboard which hides/pushes my modal login view.
The issue I'm running into is that the clickable area seems to be the entire div and button except for the input text area (which is most of the hit area). How can I get it to do the checkAuth on the input text hit area while input is disabled... or conversely, if I move the checkauth to the input onclick event, how can I enable the input and not have it bring up a keyboard.
<div class="bar bar-footer item-input-inset" style="position:fixed; " ng-click="checkAuth()">
<label class="item-input-wrapper">
<input type="text" placeholder="comment" ng-disabled="true">
</label>
<button class="button button-small" ng-disabled="true">
Submit
</button>
</div>
Unless you need to support IE 10 and earlier, you could try setting pointer-events: none on the input when it's disabled.