I'm new to angular, been trying to fix this for about an hour now but can't get it working. I have some html code:
<li class="notification-dropdown hidden-xs hidden-sm">
<a href="#" class="trigger">
<i class="icon-warning-sign"></i>
<span class="count">8</span>
</a>
<div class="pop-dialog">
<div class="pointer right">
<div class="arrow"></div>
<div class="arrow_border"></div>
</div>
<div class="body">
...
The notification pop-dialog is hidden by default and the following JQuery shows it when the .notification-dropdown is clicked
$(document).on("click", ".notification-dropdown", function (e) {
e.preventDefault();
e.stopPropagation();
// hide all other pop-dialogs
$(".notification-dropdown .pop-dialog").removeClass("is-visible");
$(".notification-dropdown .trigger").removeClass("active");
var $dialog = $(this).children(".pop-dialog");
$dialog.toggleClass("is-visible");
});
For some reason, this code does not work when I put the html into AngularJS's ng-view loaded as a partial into a main html document.
I've already loaded the JQuery lib before Angular.
I've tried to shorten the code for simplicity, I can show more code if needed.
Best try to avoid using jQuery with AngularJS completely. Using both together in this fashion is a common mistake among those new to Angular, coming form a jQuery background. Here is a great answer on that topic: "Thinking in AngularJS" if I have a jQuery background?
You could just use ui bootstrap´s dropdown.
Alternatively, there are ngShow and ngIf. If you still want to use your own css class to hide it, just set the class with ngClass.
Then, you can use ngClick to recieve the click event.
Here is how it would look (HTML only, you dont even have to write any JS for this):
<li class="notification-dropdown hidden-xs hidden-sm" ng-click="showDialog = !showDialog">
<a href="#" class="trigger">
<i class="icon-warning-sign"></i>
<span class="count">8</span>
</a>
<div class="pop-dialog" ng-show="showDialog">
<div class="pointer right">
<div class="arrow"></div>
<div class="arrow_border"></div>
</div>
<div class="body">
<!-- body content -->
</div>
</div>
</li>
EDIT : Added Code
EDIT : working plunk
Related
I am trying to alert when I click on an anchor tag with id small-text.
The element is inside a Bootstrap popover. However, when I remove it and put it anywhere outside the popover, the alert starts workings whenever I click on the link.
I have no idea what's happening.
DEMO https://jsfiddle.net/08sa99uk/4/
HTML
<div class="article-links">
<span class="font">
<a href="#"
data-container="body"
data-toggle="popover"
data-html="true">
<i class="fa fa-font fa-2x"></i>
</a>
<span class="font-size" style="display: none">
S
</span>
</span>
</div>
Javascript
// This is the function that allows me to use an external div for the popover content
$('.font a').on('click', function(e) {e.preventDefault(); return true; }).popover({
html: true,
placement: 'bottom',
content: function() {
return $('.font-size').html();
}
});
$('a#small-text').on('click', function() {
alert('clicked');
});
The problem is that the element in question does not exist when the DOM is rendered. If you inspect the rendered popup (typically, F12 in the browser or right click and Inspect Element), that Bootstrap is creating, it's copying your template and appending it to the DOM inside the popup wrapper:
<div class="popover fade bottom in" role="tooltip" id="popover192086" style="top: 27px; left: 0px; display: block;">
<div class="arrow" style="left: 31.7073%;"></div>
<h3 class="popover-title" style="display: none;"></h3>
<div class="popover-content">
S
</div>
</div>
Since this occurs, you need to delegate the second click event:
$(document).on('click', 'a#small-text', function() {
alert('clicked');
});
DEMO
Note: It should be noted that delegating at the document level is inefficient. You'll want to replace document in the code above with the closest parent code that exists in the DOM prior to initialization.
EDIT:
Regarding the latest comment below about the delegation not working with span.font, here is the fully rendered DOM layout that Bootstrap creates:
<body>
<!-- Your original code -->
<div class="article-links">
<span class="font">
<a href="#" data-container="body" data-toggle="popover" data-html="true" data-original-title="" title="" aria-describedby="popover186211">
<i class="fa fa-font fa-2x"></i>
</a>
<span class="font-size" style="display: none">
S
</span>
</span>
</div>
<!-- Bootstrap added code -->
<div class="popover fade bottom in" role="tooltip" id="popover186211" style="top: 27px; left: 0px; display: block;">
<div class="arrow" style="left: 31.7073%;"></div>
<h3 class="popover-title" style="display: none;"></h3>
<div class="popover-content">
S
</div>
</div>
</body>
Notice that in the Bootstrap rendered code, there is not a span.font. UI libraries tend to extract user created templates and then add additional code to make them perform in the desired way. In this case, you'd have to add the delegation code to the next outer element, possibly body. For your use case, it's probably fine to use document this once. I would not make a habit of it though.
I have a card grid layout in my HTML code, to get/load the dynamic data for the same I need to call a function say loadRoomObjects in the DIV tag as shown in the below code
<div class="card_grid widget uib_w_33 wrapping-col d-margins flex-basis-33" data-uib="layout/card_grid" data-ver="0">
<div class="widget widget-container content-area vertical-col uib-card uib_w_34 section-dimension-34 cpad-0" data-uib="layout/card" data-ver="0">
<h4 class="card-tittle">{{testing(Room)}}</h4>
<div class="list-group widget uib_w_38 d-margins" data-uib="twitter%20bootstrap/list_group" data-ver="1">
<a class="list-group-item allow-badge widget uib_w_39" data-uib="twitter%20bootstrap/list_item" data-ver="1">
<p class="list-group-item-text">bed</p>
</a>
<a class="list-group-item allow-badge widget uib_w_40" data-uib="twitter%20bootstrap/list_item" data-ver="1">
<p class="list-group-item-text">Stove</p>
</a>
<a class="list-group-item allow-badge widget uib_w_41" data-uib="twitter%20bootstrap/list_item" data-ver="1">
<p class="list-group-item-text">Tap</p>
</a>
</div>
</div>
I am not sure how to achieve this using the given directives in AnjularJS, as I could not find a suitable ng-directive which call a perticular function in the controller.
Can you try calling loadRoomObjects function using ng-init directive .
The ngInit directive allows you to evaluate an expression in the current scope.
it can be used with div like :
<div ng-init="loadRoomObjects()" ></div>
Check the docs here
Is your problem as simple as creating a Scope variable to store the room objects (i.e.. $scope.room_objects = loadRoomObjects()). Call ng-repeat="roomObject in room_objects" on your div in HTML code
Ctrl:
$scope.room_objects = loadRoomObjects();
HTML:
<div ng-repeat="room_object in room_objects" class="card_grid widget ...">
....
</div>
Additionally we can keep a watcher on room_objects scope variable to keep the HTML in sync with the Ctrl code.
For sample: please check the link http://plnkr.co/edit/Q3Z669FeRHqMORcQ9v6K?p=preview.
I am working in Visual studio 2013.
I am trying to hide or based on authentication, I want to show the menu. But ng-if not working outside the ng-view.
Actually ng-if is not coming with the intellisense. Though I pasted the code, I didn't get. But ng-hide is working.
I am getting the ng-hide. But I don't like to use ng-hide, because this will just hide the element. So using inspect element, we can enable the menu.
Why I am not getting ng-if? Am I doing in the wrong way
<div id="page-wrapper" ng-controller="indexController">
<div id="page-header" class="bg-gradient-9" ng-if="!authentication.isAuth">
<div id="mobile-navigation">
<button id="nav-toggle" class="collapsed" data-toggle="collapse" data-target="#page-sidebar" aria-expanded="false" aria-controls="navbar"><span></span></button>
</div>
<!--Logo for all the screen-->
<div id="mobile-navigation">
</div>
<div id="header-logo" class="logo-bg mobile-hidden">
<a href="#/" class="logo-content-big" title="">
</a>
<a href="#/" class="logo-content-small" title="NoteReport">
NoteReport
</a>
</div>
</div>
<div id="page-content-wrapper ">
<!--Partial loading of the content-->
<div class="angular-ngview-content" ng-view>
</div>
</div>
</div>
This is the ancient old issue if child scopes created by ng-if, try:
ng-if="!$parent.authentication.isAuth"
EDIT
The ng-if directive was provided after angular 1.1.5, you are using 1.0.5. Working plunk.
This is because of ng-if creating a child scope and how prototypical inheritance works with primitives.just check once like
ng-if="authentication.isAuth"
change angularjs version to 1.3.8...It will work
I am green in this area and I am trying to learn while I build a virtual resume for a website I can use to advertise my programming services (my strength lies more with C#, Java and similar languages :')
Something I think would look pretty cool, is if when you click on a link in my side-bar, the content on the page slides out and is replaced with the content on the new page that slides in, in the previous page' place.
I am a bit lost on how to achieve this though and if I have to do a per-page thing, or if I can make one general method in Javascript to take care of it. I am using jQuery and bootstrap.
var main;
main = function () {
$(".sidebar-nav a").click(function() {
<!-- Not sure what to do here -->
<!-- Pseudo Code -->
<!-- find out what element was pressed
slide out content on current page using animate();
slide in content from the element that was pressed using animate(); -->
})
}
$("document").ready(main);
The HTML:
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<h1>Brand</h1>
</li>
<li>
<a href="#">
Index
</a>
</li>
<li>
<a href="#">
About Me
</a>
</li>
<li>
<a href="#">
Resume
</a>
</li>
<li>
<a href="#">
Contact
</a>
</li>
</ul>
</div>
<!-- Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
Toggle Menu
</div>
</div>
</div>
</div>
</div>
Let me know if you need the CSS.
You should use an AJAX technology to seamlessly load another page's HTML contents inline into the document.
The best choice (in my opinion) for this situation is the jQuery function load(), due to it's simplicity and pure convenience. You can also send a callback function, it's easy to implement.
You could then easily implement a CSS animation using the animation attribute.
Why the tabs are not shown with AngularJS tabbale directive.
http://plnkr.co/edit/yu0Bh0?p=preview
This is optional part of angularJS, which is used everywhere in the docs (here)
The source of the directive is here.
I don't see any special css in the doc site.
EDIT:
the markup of the plunkr (above) was copied from the doc link given above.
But, when tried with the markup on Angular main page (angularjs.org), it works.
Not sure how it works at doc site.
The working markup has data-toggle attributes, and url fragments to tab pane.
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="">index.html</li>
<li class="">project.js</li>
<li class="">list.html</li>
<li class="active">detail.html</li>
<li class="">mongolab.js</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="project-html">
<h1>project</h1>
</div>
<div class="tab-pane" id="project-js">
<h1>project js</h1>
</div>
<div class="tab-pane" id="list-html">
<h1>project html</h1>
</div>
<div class="tab-pane active" id="detail-html">
</div>
<div class="tab-pane" id="mongolab-js">
</div>
</div>
</div>
There has to be some functionality / code written somewhere that makes the tabs work. Currently, what you have there is just the html and css ( which provides the structure and the styling ) and the behaviour part is missing ( the JS part ).
In angular, this behaviour is custom written and is provided the directive. In bootstap, you need to include the js file ( bootstrap.js ? ). Then there are two ways of making this work. Either include the data-* elements as specified in the docs in their appropriate places or on document ready call something like
$(".tabbable").tabs();
in your JS code somewhere. This is the behavioural pieces that is missing from your plunker.