I am working in a project where I use jQuery (~2.1.1), Bootstrap (~3.3.1), AngularJS (~1.3.4), Angular-ui-bootstrap (~0.12.0), and some more libraries. I have a small problem which is related with the popover directive of the angular-bootstrap library. This little problem is that many of the popovers are misplaced, so probably I am forgetting about something.
From the documentation and even personal tests (Plunker Example Ex. using angular 1.3.4), the popover should look aligned to the center of the HTML element, and the arrow of it should touch the element, like this:
The problem is that in my application the popover gets misplaced somehow (In this case only vertically the offset is noticeable, so it's not touching the element), as you can see next:
Another example (which is the most noticeable) is with a dynamic generated list using ng-repat, as you can see in the next picture:
<div class="col-xs-6 col-sm-2 sidebar-offcanvas"
id="sidebar-left" role="navigation">
<div class="list-group shadow-bottom" id="sideMenuTitle">
<span class="list-group-item list-group-item
disabled offcanvas-title" style="text-align: center">
<strong>Metrics</strong>
</span>
<a popover="{{metrics_messages[$index]}}" popover-popup-delay="450" popover-trigger="mouseenter"
popover-placement="top" popover-animation="true" ng-repeat="m in metrics" ui-sref="{{m.sref}}"
class="list-group-item"
ng-click="selectMetric(m)" ng-class="{active: m.selected}">{{m.caption}}</a>
</div>
</div>
PS: I included ui.bootstrap to the "global" angular module, as they suggest Angular Bootstrap Site.
The problem was related to the version where this post was made, after that version they fixed this problem.
Related
I have created an uib-accordion in my angular project, where all the uib-accordion-group elements have been created under ng-repeat(for efficiency ofcourse).
<uib-accordion close-others="oneAtATime">
<ul ng-model="some_code">
<li ng-repeat="some_code">
<div uib-accordion-group heading="{{some_code}}">
{{some_code}}
</div>
</li>
</ul>
</uib-accordion>
The problem is I want to insert different and dynamic content in the uib-accordion-group(s) but being in ng-repeat I can't use template-url. I have almost 6 rows to be displayed. Should I fall back to developing each accordion row individually(which would increase code size, hence I don't want) or do we have any such provision in uib-accordion (which maybe I am currently not aware of)?
Suggestions please.
try to use ng-class and change the styles dynamically
The html code you want to put in each accordion. Are you getting it dynamically or you have the code you just want to put different code on different condition.
I may have worded this title incorrectly but I am hoping to still get some help. I am trying to use an expression that I get from an ng-repeat to include an new page using ng-include but it is not rendering. I can write in the page I want, but I want to use the expression to include multiple pages dynamically
<div ng-app="" id="container" ng-controller="pagesController">
<span ng-repeat="x in pages">
{{x.Page | uppercase}}
<b ng-if="!$last" href="#"> - </b>
<div ng-include="'{{x.HTML}}'" name="{{x.Page}}"></div>
</span>
But if I manually enter the pages like so:
<div ng-include="'generic.htm'" name="generic"></div>
It works as expected.
I am getting used to Angular.js obviously and I am not sure if this is possible or if I can do what I want really. Any help would be appreciated.
ng-include is an angular directive, and assuming x.HTML is a string, omit the {{}} and the single quotes:
ng-include="x.HTML"
I'm building an iOS app with Phonegap, Ionic and Angular, and am having an issue where when I'm using ng-repeat with img src (or ng-src) the scrolling for a page of images becomes unacceptably jittery / laggy when scrolling past the images (you can imagine an Instagram or Facebook-like feed of images on a page). I seem to have the issue both when I load the page in Safari as well as on an iPhone. Chrome seems to be much better, so I perhaps it's a problem related to Safari?
I'm using standard ion-content tags. My ng-repeat is
<div ng-repeat="post in myPosts track by $index">
If I have the following code within the ng-repeat it works fine and the scrolling is perfect:
<img ng-src="https://s3.amazonaws.com/exampleS3Bucket/photos/somephoto.jpg">
However, when I try to use angular to have different images for each item in the repeated array I encounter the lag issue:
<img ng-src="{{post.image.url}}" >
I've tried using various ion-content scrolling settings and Bindonce, but nothing has helped so far. Appreciate any help you can provide!
You can try overflow-scroll="true" in ion-content tag.
Example:
<ion-content overflow-scroll="true">
It gave me huge performance boost.
You should take a look at the new collection repeat feature of Ionic, it helps you increase the performance for huge lists.
Here you have an extensive code example.
From the docs:
<ion-content ng-controller="ContentCtrl">
<div class="list">
<div class="item my-item"
collection-repeat="item in items"
collection-item-width="'100%'"
collection-item-height="getItemHeight(item, $index)"
ng-style="{height: getItemHeight(item, $index)}">
{{item}}
</div>
</div>
</div>
I am using angular ui drop down element
<div class="dropdown" >
<a ng-click="getTypes();" dropdown-toggle> Add a Type</a>
<ul class="dropdown-menu">
<li ng-repeat="type in Types"><a><b>{{type.sType }}:</b><em>{{type.sDescription}}</em></a> </li>
</ul>
</div>
all that i do is call a web service and populate Types all works fine! But when i add the above code in my htm the div below it starts throwing the exception of max digest reached.
the div below the drop down code(as written above) simply consists of few editable segments with icons and their visibility is controlled by ng-show and ng-hide when the use click a button
say on click of 1st segment i set a variable to true by using ng-click and depending on this variable i show or hide segments by using ng-show and ng-hide
so my doubt is that without the drop down code written above my ng-show and ng-hide work completely fine but the moment i try to use the drop down directive of angular ui i start getting this exception when i click on the buttons . please help.
Edit below is the code which follows basically user clicks on icons to reorder the elements that are appearing in the ng-repeat list and from the drop down which is above the user can add elements to this list
<ul class="repeatList text-center">
<li ng-repeat="widgets in leftWidgets" widget widgets="widgets"
class="wArea">
<a href="" class="icon-remove-circle pull-right" ng-show="editMode" ng-click="deleteWidget(leftWidgets);"
title="Delete Widget">
</a>
<a href="" class="icon-chevron-up slideUpIcon" ng-click="shiftUp(widgets,leftWidgets);"
ng-show="editMode">
</a >
<a href="" class="icon-chevron-down slideDownIcon" ng-click="shiftDown(widgets,leftWidgets);"
ng-show="editMode">
</a>
</li>
</ul>
kept doing hit and trial and found that using empty anchor tags was causing the problem. i.e. i had attached ng-click events to
text //empty href
the moment i changed them to span all worked fine! dont know why the empty "a" tags caused the problem but it will be great if any one can shed some light on the reasons for the above run time angular js exception. the link below is a useful
How to Troubleshoot Angular "10 $digest() iterations reached" Error
thanks!
I have some code that is running twice even thou angularJs is rendering only one branch of it.
<div ng-Show="SomeCondition">
...
</div>
<div ng-Hide="SomeCondition">
...
</div>
AngularJs is correctly only rendering one of the divs, however it's processing both. This is leading to some performance degredation as each section is quite big. Is there a way to remove processing from one of the branch of execution?
What you're looking for is ng-switch, which will 'Conditionally change the DOM structure.' This means that the other cases will not be run, unlike using ng-hide/ng-show, which just adjust CSS.
http://docs.angularjs.org/api/ng.directive:ngSwitch
<div ng-switch on="SomeCondition">
<div ng-switch-when="true">Example</div>
<span ng-switch-when="false">Example Two</span>
<span ng-switch-when="somethingElse">Example Three</span>
<span ng-switch-default>default</span>
</div>