I have a basic md-button with a md-tooltip inside. Although, I require a way to globally remove all tooltips from my website if the user is on a mobile device.
<md-button class="md-primary md-raised">
Hello
<md-tooltip>This is a buttons tooltip</md-tooltip>
</md-button>
After the template is loaded and directives have run, the above gets converted into the following:
<button class="md-primary md-raised md-button md-ink-ripple" type="button" ng-transclude="" aria-label="Hello">
<span class="ng-scope">
Hello
</span>
<div class="md-ripple-container"></div>
</button>
There button element no longer contains the md-tooltip, otherwise I'd simply just remove the tooltip element.
The reason for wanting to do this is because on mobile, the md-tooltip eats the button click. Therefore having the tooltip displayed on the first click and the buttons click action on the second click. This is definitely not a desirable effect.
How can I remove all tooltips from all elements on my page so that my buttons click action is the first click/tap instead of the second?
Ok, so I've successfully implemented my suggestions earlier, here's the DEMO
I created another version of md-tooltip just to override angular material's version of it. Then I created an angular.decorator to choose which directive version of md-tooltip will angular use.
app.directive('mdTooltip', function(){ //create your overriding directive
return{
replace: true,
template: '<span style="display:none"></span>',
scope: {}, //create an isolated scope
link: function(scope, element){
element.remove();
scope.$destroy();
}
};
});
app.decorator('mdTooltipDirective',function($delegate){
var version = 0;
var onMobile = false;//do your checking here
if(onMobile) //here comes the switching
version = 1;
return [$delegate[version]];
});
the Directive word in mdTooltipDirective is important, to say to angular that we want to select it for the Directive not a service.
EDIT: I added a link function and removed the element that is placed by the overriding directive
I don't see any mention on their docs on how to do this.
There are two ways that I can think of to work around this.
display: none all <md-tooltip> if your on a mobile device.
override the mdTooltip directive then conditionally $compile the original md-tooltip or a blank one (if you are on a mobile)
HTML
<md-tooltip md-direction="bottom" class="tooltip">Tooltip Bottom</md-tooltip>
CSS
#media(max-width:599px) {
md-tooltip.tooltip {
display: none !important;
}
}
As per this issue, the md-tooltip is the buggy code.
In that case, I suggest you show the tooltip code based on the condition, i.e. only display the content if you are in a web browser.
For this task, you can use the ng-device-detector lib:
Related
I've been looking at the ng-cloak source code
https://github.com/angular/angular.js/blob/master/src/ng/directive/ngCloak.js
It looks like it strips away the ng-cloak attribute during the compile phase of the directive. But when when I try
console.log(element.html())
during the compile function of a directive, the expressions have still not been evaluated, so I get an output like
<my-directive ng-cloak> {{foo}} </my-directive>
Given that ng-cloak will remove the ng-cloak attribute and the corresponding display:none, wouldn't it show {{foo}}? I'm confused here. Whend do Angular expressions get evaluated? It doesn't look like it gets evaluated in the compile function. When is the DOM updated?
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
The directive can be applied to the element, but the preferred usage is to apply multiple ngCloak directives to small portions of the page to permit progressive rendering of the browser view.
ngCloak works in cooperation with the following css rule embedded within angular.js and angular.min.js. For CSP mode please add angular-csp.css to your html file (see ngCsp).
https://docs.angularjs.org/api/ng/directive/ngCloak
Example index.html
<div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2" class="ng-cloak">{{ 'world' }}</div>
things.js
it('should remove the template directive and css class', function() {
expect($('#template1').getAttribute('ng-cloak')).
toBeNull();
expect($('#template2').getAttribute('ng-cloak')).
toBeNull();});
Or you can use in other way
it might not be enough to add the display: none; rule to your CSS. In cases where you are loading angular.js in the body or templates aren't compiled soon enough, use the ng-cloak directive and include the following in your CSS:
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;}
Angularjs - ng-cloak/ng-show elements blink
Angular will interpolate the bindings at the end of the $digest cycle so that all of the other modifications have already completed. If they were processed earlier, a directive might later change the binding or scope and cause the DOM to be out-of-date.
You can decorate the $interpolate service so that you can log when Angular interpolates a binding:
.config(function($provide){
$provide.decorator("$interpolate", function($delegate){
function wrap() {
var x = $delegate.apply(this, arguments);
if (x) {
var binding = arguments[0];
return function() {
var result = x.apply(this, arguments);
console.log('binding:', binding, result);
return result;
}
}
}
angular.extend(wrap, $delegate);
return wrap;
});
})
You can then see that all of the directives have been processed and finally, the $interpolate service is called and the DOM is modified accordingly.
Click here for live demo.
ng-cloak also fixes the two times click bug for ng-click reverse. Once listed this instruction will fix the issue in witch the button with ng-click reverse instruction needs two clicks in order to execute.
i have a existing controller and template:
<div id="outputTableforApp" ng-controller="OutputTableModelCtrl">
<div id ="outputtablemodel_panel" ng-show="editMode">
</div>
</div>
it works perfectly. But now i need to delete the template from the project (which has a fix place in the DOM) and somehow make it appear dynamically when man a button click.
when i tried that with jQuery
$('<div id="outputTableforApp" ng-controller="OutputTableModelCtrl"><div id ="outputtablemodel_panel" ng-show="editMode">\n\
</div></div>').appendTo($('#div1'));
My Angular module didn't work at all. So i guess i need to register the module somehow again every time when someone presses the button, is that the case ? if so ,how could i do it ?
You can use ng-show so do this:
<div id="outputTableforApp" ng-controller="OutputTableModelCtrl" ng-show="showApp">
and when the button is clicked call a function (using ng-click) in your controller script that makes it that showApp is true(make sure you use $scope.showApp in the function).
I'm trying to produce a lightbox when a user clicks a link. I'm using this light box code here. I'm working with this jsbin.
I have this code here:
<button ng-click="add_overlay()">Button</button>
<div class="lightbox" ng-lightbox='{"trigger": "manual"}' id="lightbox">
<h1>This is some content</h1>
</div>
I thought by adding in the ng-click to call the overlay it would display it on click but it doesn't seem to work. I'm never to angular so any help in general would be appreciated. How can I produce the lightbox on click?
First, add_overlay() isn't accessible to you outside of the ngLightbox directive, so Angular has no idea what that method is in the context of your ng-click.
You're also using two versions of the Angular source, 1.2.1 and 1.0.7.
If you look at the angular-lightbox source, you'll see an override-able defaults object, such that you can provide the element you wish the lightbox be applied to:
var defaults = {
'class_name': false,
'trigger': 'manual',
'element': element[0],
'kind': 'normal'
}
So, set up your button like this, specifying the intended element:
<button ng-lightbox='{"trigger": "manual", "element": "lightbox"}'>Button</button>
Here's a working demo.
I am working on creating an Angular service that will append a simple notification box to the DOM and display it, without having to add HTML code and write the logic to hide and show it when necessary.
The service is called $notify and is used as below:
$notify.error( "this is an error", {position: "bottom-left"} );
The service will use angular.element to build the notification box and add it to the DOM. All of this works great. However, I am also using ngAnimate and animate.css to have the notification smoothly slide in on show and slide out upon closing. I've verified that the animations work if I simply paste the notification HTML code into my page but will not work when the code is added dynamically via the service. Do items have to be in the DOM at document load for ngAnimate to work? I've verified that the Angular service is loaded and properly inserting the HTML code but no animations are being applied. Here's what the HTML and CSS look like.
HTML:
<div class="simple-notify simple-notify-top-left simple-notify-info" ng-if="toggle">
<simple-notify-header>Hello!<span class='simple-notify-dismiss pull-right' ng-click='doSomething()'>×</span></simple-notify-header>
<simple-notify-body>Some bogus text here!</simple-notify-body>
</div>
CSS/LESS:
.simple-notify {
&.ng-enter {
display:none;
animation: #animate-enter #animation-length;
-webkit-animation: #animate-enter #animation-length;
}
&.ng-enter-active {
display:block;
}
&.ng-leave {
animation: #animate-leave #animation-length;
-webkit-animation: #animate-leave #animation-length;
}
}
Thanks!!!
You should never modify elements on the page from a service, this is what a directive is for. You should create an attribute directive on your body HTML element and in that place your logic. You can use $rootScope.$broadcast from your $notify service and $scope.$on in your directive. Alternatively, you can scrap the $notify service altogether and just use $rootScope.$broadcast as it can accept as many arguments as you want.
Lastly, you'll need to use the $compile service to make your HTML run properly after you've added it to the body. The $compile is what turns raw DOM into code Angular will process.
From inside your directive's scope.$on handler in the link function, you'd have something like.
$compile('<div>template code here</div>')(scope, function(cloned, scope){
element.append(cloned);
});
But you'd also need a cleanup as well. You might just add the code once as the directive's template and show/hide it with different content instead of adding/removing the DOM.
I'm trying to get the same ultimate functionality as ng-click + ng-show, except that I want the show to slide in instead of suddenly appear by toggling display: block/none;. I've got the jQuery animate I need, and I've set up the ng-click. I've got 2 problems, but the second might be a result of the first:
Problem 1
ng-click does not change the value of aside_users. I saw SO#12202067 which seems to be a similar situation, but I don't understand how/why their custom directive works and the native ng-click doesn't.
I see the scope: { … } after restrict: 'A',, but that appears to make $scope values available within the newly-created DOM element (my elements already exist and show up just fine, but no triggers/events are happening).
infobox.html
<aside
class="users"
ng-include src="'views/users.html'"
my-slide={"direction":"left","condition":"aside_users"}
></aside>
<i
class="icon icon-user"
ng-click="aside_users=!aside_users"
ng-init="aside_users=false"
></i>
The above code is a $compile'd template and elsewhere within the template I print out the value of the $scope parameter aside_users (prints false).
Problem 2
my-slide doesn't seem to be initiated/triggered (the logging of 'elm: ', elm doesn't appear in Chrome's console). I verified that directives.js is linked in my index.html page.
EDIT I remembered to link directives.js in index.html, but I forgot to add it to the resources array in app.js.
Plunkr
P.S. I'm not sure if <aside attr={object}> is strictly valid, but legitimate browsers seem to accept it in test cases (didn't bother to check IE). My alternate plan is to use 2 attributes: <foo my-slide="direction" my-condition="boolean"></foo>