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.
Related
I have a use case where i want to modify the whole template of the ui-grid. When i searched the files in the GitHub repository, i found that they use a template for the grid but couldn't find a way to change it anywhere. I also posted the same issue there but didn't get any response from them yet.
It is possible to replace any used template with a custom template. In the documentation you can find which gridOptions to use to define your own custom templates. You may choose rowTemplate, cellTemplate, footerTemplate, headerTemplate, etc. It is advisable to use the existing ui-grid template as starting point for creating your own custom template.
If you follow this example, you should be able to figure it out, I think :)
This plunk is taken from the Angular developer guide, but it doesn't make sense to me. It's just supposed to be showing the basic functionality of transclude, which I understand, but in the rendered output you'll see there's suddenly a span tag. Where did that come from? It's not part of the template.
Since your transclusion is just a text (in fact an implicit span), it needs to be added while compiling the HTML.
To avoid that, you can manually wrap your text around any tag, for instance a <div>, so that it will be inserted as is.
If you really want to not have any tag in between, you could write your own compile method in your directive, and set the text to the element directly, using elem.text(content) instead of elem.html(content)
It's possible that I'm not understanding the scopes correctly, but I'm having problems getting some features of my implementation to work. One of which is explained here: https://github.com/nlaplante/angular-google-maps/issues/473
I basically get the model information in the windows directive without ng-non-bindable, which prevents ng-click from working. But my ng-click method needs the information from the model to work properly.
The other issue, which you can also see in the code example at that link, is that I need to essentially show two markers per marker - what I mean is, I need to show a "frame" and then the image for each marker, which are always going to be two separate images. Is there a way to accomplish this?
Added plunkr which demonstrates both problems: http://plnkr.co/edit/QJmHKBSV2XniqF6HX7FS?p=preview
You can see that the links within the window do not work properly (they won't deliver information from the scope because that scope is isolated ?), and the other problem is going to take a more creative approach, which is that I basically need to include two images with each marker.
Try this for your details button:
<button class="btn btn-etk-green" ng-click="$parent.$parent.$parent.deviceDetails(model.id)">Details</button>
Not sure what angular google maps is doing, but after some inspecting it looks like it's dumping all your data into the model property. So you can access it that way.
Here's the edited plunkr: http://plnkr.co/edit/zkYSqcf1735nOOd4QmBI?p=preview
I have an angular multi-step form in a modal window. It has a few different views and works great but at the end of it I just want to display a tiny snippet of HTML along the lines of 'Thank you, we will be in touch shortly'
However, I thought about creating a view for this with a partial but it seems incredibly over-engineered for what it is. Is there any way in angular of just replacing the view with that sentence without creating a whole new view? This will be called from a function in the final controller
Use ng-show and ng-hide to do this in your view. Suppose if your view is no longer needed you can hide it and show the Thank you snippet at its place by using ng-show.
ng-switch is what you are looking for.
From the docs:
"The directive itself works similar to ngInclude, however, instead of
downloading template code (or loading it from the template cache),
ngSwitch simply choses one of the nested elements and makes it visible
based on which element matches the value obtained from the evaluated
expression."
http://docs.angularjs.org/api/ng.directive:ngSwitch
you can this code, if you have one area of content
<ng-view></ng-view>
good method you can find in LINK
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