I'm using angularjs (1.x) and angular-material in an electron app. I have two md-selects in a view, and when I try to use it in windows everything works ok. But when I use it in OS X, the md-select stops working after the first click. I click it and it opens the list of items, but if I click the md-select again, it doesn't show the items list anymore. Worth noting that if I click in the first md-select, the second md-select stops working too.
Inspecting html, I can see that, md-select has two children elements: md-select-value and div(md-select-menu-container). After I click and select any item, the md-select-menu-container disappears. Maybe its related to the issue, BUT the second md-select still has a md-select-menu-container and I can't open it.
Even tried a simple md-select without any options and it still opens only at first click.
<md-select ng-model="vm.test">
</md-select>
Anyone has any idea why this is happening?
I would put my code here, but I think the bug is somewhere else in my project. Because if I try the md-selects in the demo page of angular material, it works as expected.
My project is in github, so anyone can try it:
https://github.com/jradesenv/controle-projeto
UPDATE:
I've created a simple server with nodejs express to host the angular app, and it runs perfectly on chrome and safari. It seems to be a bug only with electron. I noticed that its not only the md-selects, but the md-dialogs and md-toast too have some weird delay to open and close, only running in electron.
Thanks!
I was using angular material 1.1.5 with this error. When i downgraded it to 1.1.0 i can see the mdSelects working as expected, but still got some other erros like delay in mdDialog close, delay to change tabs, etc. It's a bug with angular-material animations.
For anyone with this problem, I'm still using angular-material 1.1.5 , but I've disabled all the animations only in Safari, and now its working as expected.
I'm using this code to inject a specific css file and bootstrap angularjs, and in the specific css file I disable all animations:
function boot() {
if (/Safari/.test(navigator.userAgent)) {
var head = document.head,
style = document.createElement('link');
style.type = 'text/css';
style.rel = 'stylesheet';
style.href = 'styles/disable-animations.css';
head.appendChild(style);
}
window.onload = function () {
angular.bootstrap(document, ['app']);
};
}
//styles/disable-animations.css file
* {
transition: none!important;
transition-duration: 0ms!important;
transition-delay: 0ms!important;
}
Related
I have some problems using Material Design Lite (getmdl.io). I followed the steps showed in the getmdl.io web in order to install it (actually I use bower), but I always have the same problem, when I change the ng-route in my web, some resources don't render properly, I need to reload the page to get it properly rendered, for example.
First I have this:
then when I reload, I get what I want:
What I cant understand is why other resources like google icons or buttons work correctly but the menu button on the nav bar and other resources like this one need to reaload the page in order to render properly.
I try to include the library using the hosted method and bower method.
Any idea what is going on?
i past in my code this function
angular.module('app', ['ngRoute']).
run(function($rootScope, xxxx, xxx){
$rootScope.$on('$viewContentLoaded', function(event, next) {
componentHandler.upgradeAllRegistered();
});
});
It worked perfect! Good luck..
Libraries like MDL work by waiting for the page to load using the DOMContentLoaded event, scanning the page for things like input elements and manipulating them with JavaScript so that they can inject the bits and pieces needed to work with their components. This works fine on static websites, but the DOMContentLoaded event only fires once, so when Angular performs a page transition, the DOM changes without MDL knowing about it.
Material Design Lite has a section in its FAQ about using MDL on dynamic websites:
Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function. Here is how you can dynamically create the same raised button with ripples shown in the section above:
<div id="container"/>
<script>
var button = document.createElement('button');
var textNode = document.createTextNode('Click Me!');
button.appendChild(textNode);
button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
componentHandler.upgradeElement(button);
document.getElementById('container').appendChild(button);
</script>
Of course, this probably isn't terribly easy to do in your case, since you'd have to manually find each new element and call upgradeElement on it.
Usually, instead of doing this sort of event-based DOM manipulation, Angular uses directives to initiate DOM changes. Consider using a library built to interoperate with Angular, instead, such as Angular Material.
I'm using AngularJS, UI-Grid (http://ui-grid.info/), and Bootbox for a project. What I'd like to do is have the user click a button on the screen, and bring up a dialog box where they select an item from a UI-Grid table.
I put together the simplest example I could make:
http://plnkr.co/edit/YvsiAQhUrNqnSse1O0oh?p=preview
In this, I generate the dialog box HTML like this:
var tplCrop = '<div ng-controller="MyTableDialogCtrl">{{ someText }}' +
'<div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>' +
'</div>';
var template = angular.element(tplCrop);
var linkFn = $compile(template);
var html= linkFn($scope);
If you click the "My Dialog" button, a dialog comes up, and there is a region for the table, but it's empty. The "someText" value proves my Angular $compile is doing what it should.
If you uncomment the commented section, you'll see that the UI-Grid mechanics also seem to be working properly. But, for some reason, the UI-Grid doesn't want to render inside the dialog.
Any ideas? I'm really stumped.
Thanks,
John
http://plnkr.co/edit/bbNVgwoTRtHZp3cKcoiB?p=preview
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
$timeout( function() {
$scope.gridApi.core.handleWindowResize();
}, 1000);
}
In the modal tutorial it mentions that the bootstrap modals seem to run animations on initial render, and that this causes the grid problems with getting an accurate size.
I noted that in your plunker when I open the chrome debugger the grid shows up - indicating that it's a sizing issue of one sort or another.
I can get it to show in the above plunker by using a $timeout of 1s, and a handleWindowResize. Usually I can get away with a lot less than 1s, but in this case at 100ms it didn't work.
I'd have to say I'd be uncomfortable with a timeout this long, as it may turn out that different browsers and devices run different speeds, so you'll end up with an intermittent app. You could however consider a $interval that runs every 100ms for the first 3 seconds after window open.....that probably would cover most situations.
I'm trying to use $state.go to switch between tabs in an Ionic (+AngularJS UI Router) application, but I can't make it work with a sub-sub-state (state.substate.subsubstate). It actually works fine when moving to a sub-state (state.substate).
Here's what I mean: http://codepen.io/anon/pen/Jykmi?editors=101
Pressing the "Tab2" button neither works nor throws an error. Nonetheless, replacing the ng-click="goToState('tabs.tab2.home1')" (in line 25) with ui-sref="tabs.tab2.home1" or href="#/tabs/tab2/home1", works perfectly. Here's an example: http://codepen.io/anon/pen/DIxhC?editors=101
Even using ng-click="goToState('tabs.tab2')" would work, though that's not the intended target state.
I've found other similar questions (like this and this) but I don't think they had the same problem.
Does anybody know if $state.go should work with 3rd-level nested states?. Is the problem in my code?.
Thanks a lot in advance.
Regards,
Rafa.
As ui-sref="tabs.tab2.home1" internally use $state.go and as you said ui-sref="tabs.tab2.home1" works.
My answer is yes : $state.go() should work with 3rd-level nested states.
I actually use it in my own projet with no problems (but without ionic tabs)
I am sorry I don't have enough reputations to add a comment.
I got the exactly same problem as you do: href or ui-sref works fine while ng-click with $state.go has no effect(the address in browser changed correctly but the view remains unredirected). I solved this problem by simply use them both at the same time:
In html:
ui-sref="tabs.tabs2.home" + ng-click="goHome()"
or
href="#/tabs/tabs2/home" + ng-click="goHome()"
In controller js:
$scope.goHome = function(){
$state.go('tabs.tabs2.home');
// or, location.path works fine too:
// $location.path('/tabs/tabs2/home');
}
I don't know the reason, so this is only a workaround
Using angular 1.2, I included the angular-mobile.js file and add the ngMobile module to my module dependencies list.
Directives 'ng-swipe-left' and 'ng-swipe-right' work well but the 'ng-click' doesn't seem faster. It seems that there's still this 300ms delay on ipad...
Is something more required to use this feature?
By the way, what's the difference between the module ngTouch and ngMobile? Swipe directive seems to works including one either.
Thanks!
I have the same issue, and I'm not using jQuery. I have resorted to fastclick, and the app feels much more responsive. Yes, ngTouch is the new version of ngMobile, but in its current state it can only be used for swiping, it seems.
It seems that the issue is known and happen when jQuery is loaded:
https://github.com/angular/angular.js/issues/2548
(according 'AngularJS 1.2 And Beyond' talk, ngTouch will be the new name of NgMobile)
Look at this answer, the solution works also for angular ng-click directive.
Basically you just need to do this in stop method of jquery-ui-draggable:
$('.selector').draggable({
stop: function(event, ui) {
// event.toElement is the element that was responsible
// for triggering this event. The handle, in case of a draggable.
$( event.toElement ).one('click', function(e){ e.stopImmediatePropagation(); } );
}
});
I'm using the latest angular and ngtouch 1.2.10 and am also using jQuery. I'm still seeing the same issue you are. I added faskclick and it fixed it. Looks like there is at least one issue open on github for this problem so presumably this will be fixed at some point.
// This code should be added outside of and angularjs code.
window.addEventListener('load', function () {
FastClick.attach(document.body);
}, false);
http://jsfiddle.net/9LuS2/
This code seems to work in modern browsers + IE8. But in IE7 (open up IE, hit F12 and do IE7 mode) the fiddle doesn't work at all, and in the actual page I am working on it doesn't work, but then if you click it, it appears, but then won't go away.
What is the best way to do a hover event with DIVs that will work going back to IE7.
Do I need to use JS?
If so can someone suggest either pure JS or YUI lib as I cannot use jquery for this project.
Yes, old IEs don't like .test:hover .test_hidden (selectors for inner elements of :hover).
If JS is an option, you can use the hover event in YUI:
YUI().use('node', 'event-hover', function (Y) {
var outer = Y.one('.test');
var inner = Y.one('.test_inner');
function showInnerDiv() {
inner.removeClass('test_inner_hidden');
}
function hideInnerDiv() {
inner.addClass('test_inner_hidden');
}
outer.on('hover', showInnerDiv, hideInnerDiv);
});