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}}
Related
I have a simple website made with react, I am trying to add some links at the top of a Boostrap modal, so that when clicked, it takes you to a specific section of the modal.
for example a link looks like this,
<h4>Infected Olecrenon Bursitis</h4>
and the div I want it to take us to looks like this,
<div className="text-left border border-info rounded" id="iob">
//some code
</div>
Before opening the Bootstrap modal, we are on this page link. www.page.com/primary/guide Then we click an img which then opens the modal.
If I try it with the above code, the modal disappears and the screen fades, and my url now says
www.page.com/primary/guide/#iob
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>
So I have a button on my template, with a tooltip that gives some extra information about the button. I would like the tooltip to appear when the mouse hovers over the button, and then disappear when the button is clicked. Clicking the button loads a separate view.
Currently I have it so the tooltip appears on hover, but then the problem is that the tooltip sticks around after the button has been clicked. Since the button is no longer part of the current view, the tooltip jumps to the top corner of the screen for a few seconds before disappearing. I'd like it to disappear the moment the button is clicked.
So far I've tried two things to solve the problem, neither of which have worked:
I tried wrapping the JS function which opens a new view in $timeout, hoping that the tooltip would disappear before the new view loads.
I tried changing the tooltip-trigger to 'click', but now the tooltip won't appear when the mouse is hovering over it. It will appear once the button is clicked, and stay there until the view is re-loaded.
Here is my code, which includes the two failed attempts mentioned above:
Test.html:
<a class="the-button" ng-click="loadNewView($event)"
uib-tooltip-html="getToolTipInfo($event)"
tooltip-trigger="'click'"
>
Click Me!
</a>
Test.js:
ctrl.loadNewView = function($event) {
$timeout(function($event) { //timeout
SystemViews.openNewView(ctrl.newView);
});
};
Is it possible to have separate triggers for a tooltip like this? If not, what is another way that I can make sure the tooltip disappears before the new view is loaded?
Thank you very much in advance for any wisdom you'd be willing to impart.
The simplest solution is to hide the tooltip before changing view.
If your tooltip is triggered by a click on your anchor, you can emulate a click in your loadNewFunction function to hide it.
Test.html:
<a id="the-button" ng-click="loadNewView($event)" uib-tooltip-html="getToolTipInfo($event)" tooltip-trigger="'click'">Click Me!</a>
Test.js
ctrl.loadNewView = function($event) {
angular.element('#the-button').trigger('click');
SystemViews.openNewView(ctrl.newView);
};
Maybe this answer can interest you since it's about a very similar question.
I found the solution (for me, at least). I learned that you can have multiple triggers if you separate them by space. For my solution, I used the value:
tooltip-trigger='mouseenter click'.
That way it always turns on when I mouse-over, and turns off when I click.
Test.html:
<a class="the-button" ng-click="loadNewView($event)"
uib-tooltip-html="getToolTipInfo()"
tooltip-trigger="'mouseenter click'
>
Click Me!
</a>
Test.js:
ctrl.loadNewView = function() {
SystemViews.openNewView(ctrl.newView);
};
Hope someone else finds this helpful!
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 want to code a contextmenu directive for my project. First of all created a sample context menu as an angular JS directive:
var myApp = angular.module('myApp',[]);
myApp.directive("myContextMenu", function(){
restrict: 'AE',
replace: true,
template: "",
link: (scope, elem, attrs) ->
elem.bind "contextmenu", ->
scope.$apply ->
console.log "Right click to an item."
elem.bind "mouseleave", ->
elem.bind 'mouseover', ->
elem.css('cursor', 'pointer');
});
Here is my sample HTML file:
<div ng-app>
<div my-context-menu>
Right click to display a context-menu
</div>
</div>
When I right click to the text, I want to append some div(for ex. Sample Context Menu). When the mouse leaves the div I want the Sample Context Menu to be removed.
What is the right approach for that. Should I fill the "template" field of the directive? Should I hide and show the context menu? Or should I add and remove the context menu?
Any kind of help is kindly appreciated?
Regards.
Have a look at this project https://github.com/ianwalter/ng-context-menu
In my opinion the important thing is how you define the context menu and good example to think about it is ng-repeat (this way you will have to think about scope a bit more)
I think that defining menu inline would be quite clean
i.e
<my-context-menu>
<ul>
<li>
<a ng-click="f()">Option 1</a>
</li>
<li>
<a ng-click="f()">Option 2</a>
</li>
</ul>
</my-context-menu>
this way directive would be concerned only how the menu is displayed and the content would be defined inline and you could easily call function in current scope
I find showing / hiding div would good enough - maybe when u have huge number of items in page and different context menus creating div on the fly would be more suitable
I would use a more generic approach and make reusable to various controllers. Think about configurable option for adding items to menus. What methods would be called by clicking that item - make this also customizable.
Also the positioning of context menu, if menu oepned at right corner and gets hidden within window - have detection at place to shift the menu to left.
You can check the one I have written - https://github.com/shekhardesigner/Context-Menu-Angular-Directive