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
Related
I am in the process of replacing all my bootstrap.js components with their respective angular counterparts using UI Boostrap. So far so good, but i can't seam to figure out to keep only the active tab open while the rest are closed. Thank you for any and all assistance.
HTML CODE
<!-- Accordion -->
<uib-accordion ng-repeat="task in activeTasks track by $index">
<div ng-include="'assets/views/task_list.html'"></div>
</uib-accordionv>
ng-inlcude: task_list.html
<uib-accordion-group panel-class="panel panel-default">
<uib-accordion-heading>
<h4 class="panel-title" role="button" uib-accordion-header>{{task.title}}</h4>
</uib-accordion-heading>
{{task.description}}
</uib-accordion-group>
DEMO:
url
Your ng-repeat directive is generating a new <uib-accordion> element for each task.
You want a single <uib-accordion> element containing several <uib-accordion-group> elements (one for each task).
What is oneAtATime ?
Don't you just want to say close-others="true"
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.
<a data-ng-href="" uib-popover-template="'profile.html'" popover-placement="bottom"></a>
<script type="text/ng-template" id="profile.html">
<div class="media">
<div class="media-left">
<a data-ng-href="">
<img class="media-object" data-ng-src="" alt="">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" data-ng-bind="mainCtrl.Authentication.getUser().fullName">Unknown User</h4>
</div>
</div>
</script>
error
Error: Syntax error, unrecognized expression: <div class="media">
<div class="media-left">
<a data-ng-href="">
<img class="media-object" data-ng-src="" alt="">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" data-ng-bind="mainCtrl.Authentication.getUser().fullName">Unknown User</h4>
</div>
</div>
at Function.Sizzle.error (jquery.js:4421)
at tokenize (jquery.js:5076)
at select (jquery.js:5460)
at Function.Sizzle [as find] (jquery.js:3998)
at jQuery.fn.extend.find (jquery.js:5576)
at jQuery.fn.jQuery.init (jquery.js:196)
at jQuery (jquery.js:62)
at compile (angular.js:7543)
at ui-bootstrap-tpls.js:4688
at processQueue (angular.js:14792)
I created a template with bootstrap components and i am using this template to create bootstrap popover. can someone correct my mistake
I encountered this issue today and when I was about to post the same issue, when I entered my post title, I came across this post.Which in turn led me to the jquery documentation.
Essentially what I did was strip the spaces in the template and it worked fine. I.E:
Before:
<script type="text/ng-template" id="deletePopover.html">
<div>Sample template.</div>
</script>
After:
<script type="text/ng-template" id="deletePopover.html"><div>Sample template.</div>
</script>
As Angular UI Bootstrap doesn't have a dependency on jQuery, I don't know why this is an issue and as I haven't really looked into why this works, I thought I'd post it in the meantime.
Had the same problem. Resolved changing the order of loading jquery and bootstrap. Now I load bootstrap and then jquery and it seems to solve it. But strange nonetheless.
Just want to point out that it seems that the root of the requirement is that the string must start with a < character. So you don't actually need to stick the whole thing on a single line (which isn't very nice for a more complicated template). The following works for me:
<script type="text/ng-template" id="template.html"><span></span>
<div>
Hello there
</div>
</script>
Having the <span></span> immediately after the opening <script> allows the rest of the template to be rendered as HTML.
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
I am building a website using Angularjs, also I am using an admin theme for bootstrap.
The theme works fine, but when I divide it in views (ng-view), the different javascript based parts stop working.
For example to open a modal window
<a href="javascript:;" class="primary-bg medium radius-all-2 display-block >btn basic-dialog">
<span class="button-content text-center float-none font-size-11 text->transform-upr">View Basic dialog example</span>
</a>
</div>
<div class="hide" id="basic-dialog" title="Basic dialog title">
<div class="pad10A">
Dialog content here
</div>
</div>
if I put this just in the index.html of the application it works fine, if I move it to an ng-view it doesn't work.