I would like to use the ui-bootstrap tooltip directive to assign tooltips to an array of buttons which are rendered by an ng-repeat directive, like this:
<button ng-repeat="label in labels" tooltip="{{label}}">{{label}}</button>
but I'm facing a strange issue: the ng-repeat loop variable gets a blank value, except that in the tooltip itself, so for example in the above example the label value would be blank in the button.
A snippet showing the issue could be seen at this link.
Everything is ok removing the tooltip attribute.
Is there anyone who has been using ui-bootstrap and knows about such issues?
You are using old angular-ui lib, This one seems like a bug of Angular-Ui, Looks like they have Fixed it in current version.
Demo: http://plnkr.co/edit/wSzIjgq6JDAAY06iNGrG?p=preview
Related
Edit: Solution found! See bottom of question for explanation.
I have a directive sfNgFieldWrapper that contains a tooltip that I got from angularjUI ui-bootstrap.
The text of the tooltip is set with tooltip="{{ttpText}}".
The problem is that the text contains html entities and these entities are not translated to the correct character.
I can't use ng-bind-html but I've checked and when I do use it on a span the text for the tooltip is correctly transformed.
However, I can't use span and ng-bind-html since I need to use tooltip.
To fix this predicament I thought I would use $sce.pareAsHtml. The problem is that the html entities are not correctly transformed to characters!
I use it in my directive link function like so:
scope.ttpText = $sce.parseAsHtml(scope.ttpText);
Why doesn't parseAsHtml work while ng-bind-html does?
I can't put the parseAsHtml inside scope.$watch because that triggers a loop.
TrustAsHtml doesn't work either.
The tooltip function binds the content like so:
$document.find( 'body' ).append( tooltip );
Solution
After looking into the code of ui-bootstrap I started search stackoverflow specifically for it and I found a question with a similar issue and solution!
Angular-ui tooltip with HTML
Stupid me could also just have checked the AngularUI guide:
http://angular-ui.github.io/bootstrap/#/tooltip
The solution is simple, I can just add -html-unsafe after data-tooltip.
Solution
I also updated the question for maximum visibility.
After looking into the code of ui-bootstrap I started search stackoverflow specifically for it and I found a question with a similar issue and solution! Angular-ui tooltip with HTML
Stupid me could also just have checked the AngularUI guide: http://angular-ui.github.io/bootstrap/#/tooltip
The solution is simple, I can just add -html-unsafe after data-tooltip.
Question: Is there a bug in angular-strap? Or do I misunderstand how Angular works, and this is expected?
I've created a plunker to demonstrate the behavior.
What I want:
I want to show a different tooltip for each item in an ng-repeat.
Behavior I'm seeing:
Under certain conditions, the tooltip content is not properly inserted into the content template. Thus you only see the template, and not the content template or content itself.
Conditions:
When the page is first loaded, the tooltips work as expected.
When an item is added to the ng-repeat, its tooltip does not populate the template's content section.
If the page starts off with zero items in the ng-repeat, the tooltip in the first item added will work as expected. Items added after that will exhibit the problem.
Regardless of how many items the ng-repeat starts with, any removal of any item from it will make all items added in the future not have working tooltips.
Thoughts: If I boil it down, the "first load" works fine. After that, it doesn't. I'd guess that what happens is that there's a compilation step happening after the first round of adding items into ng-repeat. At that point, the angular-strap tooltip code sees the directive attributes, and sets up those tooltips and the content template. Subsequent changes to the ng-repeat are missed by angular-strap (even though I can see in the console that the call from bs-popover=tooltip(item) does actually run each time the ng-repeat list is updated). But I'm still stumped and wondering if this is behavior I can get around.
How do I allow dynamic tooltips in items added to an ng-repeat?
This seems to work in _popover.html
<div class="popover-content">{{content}}</div>
That is using {{ }} instead of ng-bind...works very odd.
Upon further investigation... Its probably happening somewhere around here:
https://github.com/mgcrea/angular-strap/blob/master/src/tooltip/tooltip.js#L83
Though I don't know where/how/what yet.
Update
So the bug (in Angular-Strap) is with caching your template. Initial retrieval (via http) works fine. But it caches them as an array, and upon retrieval from cache (subsequent additions) it gets an array. Which doesn't have a .data property so your template is empty, and your ng-bind is removed..
I wrote a directive which displays a list of elements. After list change the old list moves to the left followed by the new one. To achieve this behavior use ng-repeat directive and css3 transitions. I noticed that animations classes(ng-animate ng-enter ng-animate-start ng-animate-active ng-enter-active) are not beeing removed after animation end and the old node ceated by ng-repeat loop is also not removed.
Example in plunker: http://plnkr.co/edit/gqRIIUJF55NNvlt9lqMz?p=preview
The problem occurs in firefox. Under chrome everything is fine.
I would be grateful if you tell me what I'm doing wrong, or if it is a angular issue.
That's because the ng-animate/ng-animate-start... are removed since angularjs v1.2.0 so you don't need to use them, check the docs or this example by kevin-smets.
I am trying to create Master Details in table
here is the plnkr Code
but as i start putting filter for the ng-repeat the dom rendering behaves weird
click the + button to expand row and the search the textbox
am i doing some thing wrong
My guess is that ng-repeat-end and ng-if do not play well together. If you place the ng-if in the <p> element, your example is working. Of course this has the (undesired?) effect of allways including the details row in the DOM, event though it will be hidden.
I am trying to get a ng-click event to fire correctly when integrating the Angular Kendo UI.
The following Plunker shows a working example, click the button click me and a modal window appears, however if I add the kendo-grid attribute to line 18 of index.html then the pop up does not work. e.g. changing:-
<table>
to:
<table kendo-grid>
Then the modal popup does not work. I suspect that when the grid is rendered then angular loses the binding. Not sure how to fix it. Can anyone help?
The problem is the angularjs-kendo labs master file does not support command binding and a couple of issues have been raised.
Basically you need to take the javascript from the compile-kendo-grid-rows
See working plunker.