I have the following sample code which provides the sample structure for the Left Nav Menu and the Middle Content section.
Here is the Plunker created for this example.
Plunker URL
When i click on Display Left Nav Menu Icon and select a menu item it updates the content of the view "content" as expected.
How ever as soon as i click on the LEft Nav Menu Icon the content from menu.html appear in the content view . Not sure why it is happening.
Left Nav Icon is in leftnav.html and it's handlers are in leftnav.controller.js why the main controller is getting invoked ??
Could you please let me know.
Thanks.
You have a location in the href of your a tag. Just getting rid of that should give you the correct functionality.
<a href="" class="btn btn-default" id="menu-toggle" ng-click='toggle()'>
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 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.
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 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'm about to kill someone and I'm thinking of the JQM team at the moment. Sigh!
So, clearly I'm doing something stupid.
I've populated a JQM popup div with some info from my database and on first page load, clicking the button with the popup's id as HREF works great!
When I submit the form and return to the same page, it doesn't work. Inspecting the element I see that the ID of the popup is appended with '-placeholder' and the div simply has a comment in it.
Problem: On page reload, I can't click on the HREF that links to the popup (or I can but nothing happens - obviously because the markup has vanished).
Here's the view code of 1. the link to the popup div and 2. the actual pop up div on first and second page load.
Linking to popup:
Browse Database
Original popup div element
<div id="reqform_search_sicnaic" data-role="popup">
<div data-role="header" data-theme="b">
Random Header
</div>
<div data-role="content">
Random content
</div>
</div>
Popup div after form submission / second page load
<div style="display: none;" id="reqform_search_sicnaic-placeholder"><!-- placeholder for reqform_search_sicnaic --></div>
Obviously, I can't open the dialog on page load. :(