I'm fairly new to angularjs and am using angular strap to use some of their features like aside.
So basically I have a function like this:
$scope.myAside = function() {
$aside({
title: 'My Title',
show: true,
animation: 'am-slide-left',
placement:'left',
contentTemplate: 'views/aside.html'
});
};
and I wanted to know how to use the two binding to get 'show' to display on the page. I basically wanted something like this on the page:
The aside is open: {{myAside.show}}
I read through their setup but couldn't find anything about two binding and how to know if the aside modal is open or not.
Here is the plugin with the documentation about aside. http://mgcrea.github.io/angular-strap/#/asides
You need to use {{ myAside.$scope.$isShown }}
Here is a plnkr showing how this works.
I've added the color plugin to my TinyMCE instance.
plugins: "textcolor",
toolbar: "forecolor backcolor"
I'm using the ng-bind-html attribute to add the tinyMCE editor content to an element. Altought, the result doesn't show as expected, because I'm adding a color into the editor, but it's not reflected to the element with the ng-bind-html attribute.
This is the result:
The generated HTML is this:
<p>TESTING <span style="color: #ff0000;">COLORED</span> CONTENT</p>
Do you guys have any idea how to reflect the colors to the binding element?
Thanks!
On setup you can call NodeChange event:
setup: function (ed) {
ed.on('NodeChange', function (e) {
ed.save();
updateView(e);
});
}
I know it's been years since you asked this question, but I had the same problem today.
The inline colors are actually saved properly to the ng-model variable, but ng-bind-html strips the inline styles from its output.
The solution is found here: AngularJS: Bind html string with custom style
Load the $sce service in your controller constructor, and create this controller function:
$scope.trustAsHtml = function(string) {
return $sce.trustAsHtml(string);
};
And output the html like this:
<div ng-bind-html="trustAsHtml(htmlString)"></div>
Then all the colors should show.
I have the following problem:
In my application every link has a tooltip (from bootstrap-ui). If the link is clicked, a alert dialog appears and the tooltip disappears. But in firefox the tooltip is still shown!
Here is a plunker:
plunkr
And thats how I want to use it with tooltip:
<a tooltip="do something" tooltip-popup-delay="300" tooltip-placement="bottom" ng-click="doSomething()">do Something</a>
the function:
$scope.doSomething = function()
{
alert("do Something");
}
After the alert window is confirmed, the tooltip is still shown in firefox.
Can someone help me, how to hide this tooltip in firefox? This is really stupid!
Thank you!
You can manually hide your tooltips by using jQuery like this:
jQuery('.tooltip').hide();
This will hide all instances of the tooltip. In your case, you could call this right after your alert like so:
$scope.doSomething = function()
{
alert("do Something");
jQuery('.tooltip').hide();
}
Make sure you add the jQuery library if you go with this approach.
I have the following example.
In the example I'm using kendo menu with angular directive for kendo. Each item in the menu is my custom directive. When I use template inside the directive is works fine but when I use templateUrl it doesn't work, any ideas?
The reason I am using a custom directive for the menu is because I couldn't find out how to register click of a specific item in the menu. There is an event in kendo menu (select) that I can use to register all menu item selections but then in the callback function I don't know which item was selected because there is no id on the DOM element and I also don't get the model data so there is no indication of what was clicked. How can I know that the "Open" menu was clicked for example?
1) The directive kendo-menu bootstraps the kendo menu from it's content. If you are using a template all is fine because the sub html structure is created before kendo bootstraps the menu. If you are using a templateUrl the template gets loaded and if the data arrive angular updates the dom in your directive. But at this time the kendo-menu directive is ready with bootstrapping the menu, so it will not be aware of any changes angular made on the dom. How to solve this: as you did - only use inline templates or put the templates to the templateCache before you used the template. But this requires a lot of changes to your code.
2) I am not quite sure where your problem is. But you may register a ng-click function like this:
<ul kendo-menu>
<li ng-repeat="item in menuData.dataSource">
<label>{{item.text}}</label>
<ul>
<li ng-click="menuSelected(subitem)" ng-repeat="subitem in item.items/>
<label>{{subitem.text}}</label>
</li>
</ul>
</li>
</ul>
in your controller you have access to the selected item:
$scope.menuSelected = function(selected){
console.log(selected);
}
here is the working PLUNKR
If you populate the menu from a dataSource you can specifiy a select function in your menuData:
$scope.menuData = {
select: function(e) {
console.log(e);
console.log(e.item.textContent);
},
dataSource: [ ... ] };
e.item.textContent is the value that you have provided in your dataSource as text.
I've been looking around and trying out different things but can't figure it out. Is it possible to hide an angular-ui tooltip with a certain event?
What I want to do is to show a tooltip when someone hovers over a div and close it when a users clicks on it because I will show another popup. I tried it with custom trigger events but can't seem to get it working. I made this:
<div ng-app="someApp" ng-controller="MainCtrl" class="likes" tooltip="show favorites" tooltip-trigger="{{{true: 'mouseenter', false: 'hideonclick'}[showTooltip]}}" ng-click="doSomething()">{{likes}}</div>
var app = angular.module('someApp', ['ui.bootstrap']);
app.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.setTriggers({
'mouseenter': 'mouseleave',
'click': 'click',
'focus': 'blur',
'hideonclick': 'click'
});
}]);
app.controller('MainCtrl', function ($scope) {
$scope.showTooltip = true;
$scope.likes = 999;
$scope.doSomething = function(){
//hide the tooltip
$scope.showTooltip = false;
};
})
http://jsfiddle.net/3ywMd/
The tooltip has to close on first click and not the 2nd. Any idea how to close the tooltip if user clicks on div?
I tried #shidhin-cr's suggestion of setting $scope.tt_isOpen = false but it had the rather significant issue that, while the tooltip does fade out, it is still present in the DOM (and handling pointer events!). So even though they can't see it, the tooltip can prevent users from interacting with content that was previously behind the tooltip.
A better way that I found was to simply trigger the event used as tooltip-trigger on the tooltip target. So, for example, if you've got a button that's a tooltip target, and triggers on click...
<button id="myButton"
tooltip="hi"
tooltip-trigger="click">
</button>
Then in your JavaScript, at any point, you can trigger the 'click' event to dismiss your tooltip. Make sure that the tooltip is actually open before you trigger the event.
// ... meanwhile, in JavaScript land, in your custom event handler...
if (angular.element('#myButton').scope().tt_isOpen) {
angular.element('#myButton').trigger('click');
}
Since this triggers the actual internals of AngularUI's Tooltip directive, you don't have the nasty side-effects of the previous solution.
Basically you cannot play with the tooltip-trigger to make this work. After digging through the ToolTip directive code, I found that the ToolTip attribute exposes a scope attribute called tt_isOpen.
So in your ng-click function, if you set this attribute to false, that will make the tooltip hide.
See the updated demo here
http://jsfiddle.net/3ywMd/10/
Like this
app.controller('MainCtrl', function ($scope) {
$scope.likes = 999;
$scope.doSomething = function(){
//hide the tooltip
$scope.tt_isOpen = false;
};
})
Michael's solution got me 90% of the way there but when I executed the code, angular responded with "$digest already in progress". I simply wrapped the trigger in a timeout. Probably not the best solution, but required minimal code
// ... meanwhile, in JavaScript land, in your custom event handler...
if (angular.element('#myButton').scope().tt_isOpen) {
$timeout( function(){
angular.element('#myButton').trigger('click');
}, 100);
}
For future reference, the accepted answer angular.element('.yourTooltip').scope().tt_isOpen will not work in new versions as tooltip has been made unobservable. Therefore, the entire tootlip is removed from DOM. Simple solution is to just check if tooltip is present in DOM or not.
Borrowing from #liteflier's answer,
// ... meanwhile, in JavaScript land, in your custom event handler...
if (angular.element('.yourTooltip').length) { //if element is present in DOM
setTimeout( function(){
//Trigger click on tooltip container
angular.element('.yourTooltipParent').trigger('click');
}, 100);
}