I am using the angular-ui-swiper and I want to set the active slide depending on the URL-Parameter. I have an angular controller, where the data is loaded for the swiper. This works fine, the buttons are working (prev, next). I call the method slideTo to set the activeslider after link click in the navigation. But it is not working if I load the page with the special parameter. The swiper-instance is not defined. So I have to call the correct page lifecycle event. I used the load, init-events, an equivalent to document ready, but without any success. It is only working if I put my setActiveSlide-Method to the scroll-event :D
Do you have any idea?
Thanks in advance
Maybe you need to make the set the activeslider in this kind of block:
angular.element(document).ready(function () {
//code here
});
Can you make a jsfiddle so we can see your code?
Related
I have a complicated setup. My application is driven by a set of "rules" which dictate what the user interface is. The UI is rendered by looping through the rules and creating the individual dropdowns. Initially, everything renders properly. However, once a user makes a change to the UI, other rules may be affected. In my application, an api call is made, which then returns a modified set of rules. In the attached plunker, I've simplified things such that only the new set of rules is applied, which causes the page to re-render. The problem is that my users would like to be able to tab between all of the entries on the page and make changes. However, once the page is re-rendered, the currently selected page element is now gone nothing has the focus. I've tried to put the focus back on the proper element by tracking a common Id, but to no avail.
Using either of these doesn't seem to work.
var el = document.getElementById(focusId);
el.focus();
angular.element(el).focus();
I've also tried using the autofocus attribute on the dropdown that I want to have focus, but that didn't work either. I'm using angularjs 1.2. Any ideas are appreciated.
http://plnkr.co/edit/ND9PKqULIOlixWR4XChN?p=preview
If you want to assign auto focus dynamically to a element on the DOM from angular you can use this:
var myEl = angular.element(document.querySelector('select'));
myEl.attr('autofocus',"attr val");
You can also pass in an id like: angular.element(document.querySelector('#focusId'));
You can look here for a prior answer which may be of some more help!
-Cheers!
Problem here is, you are trying to focus the element before the blur event completes. So you need to execute the focus code after blur event. Async execution of your focus code would solve the problem. You can use either setTimeout or $timeout.
setTimeout(function(){
angular.element('#'+focusId).focus();
/* //or
var el = document.getElementById(focusId);
el.focus();
*/
});
or
$timeout(function(){
angular.element('#'+focusId).focus();
/* //or
var el = document.getElementById(focusId);
el.focus();
*/
});
dont forgot to inject $timeout to your controller if you are using second code. Hope this helps :)
scope.$watch('[apps, date]', function() {
...
...
...
}
Now I know that the above works, but what I need is it to display nothing unless an app is selected first and THEN after that when an app or a date is changed, the code must re-run.
Perhaps this isn't possible.
Any help would be greatly appreciated. :)
**Context:
What happens is I get a UI grid returned with no data(as no app has been selected) until I eventually select an app.
If your intent is to watch a group or a collection you just have to scroll down this page:
https://docs.angularjs.org/api/ng/type/$rootScope.Scope
Search for example: $watchGroup inside the page
I'm a beginner with AngularJs and i have some trouble understanding how to use $cookieStore :/
I have a lot of buttons. Everytime a button is clicked, a distinct function is called in the controller, and in this function, i'm trying to store a value in a cookie
example :
$cookieStore.put('cookie', '1');
And at the loading of the page, i added this line :
alert($cookieStore.get('cookie'));
When we load the page for the first time, it's normal to get an "undefined" popup. But the problem is, even after clicking multiple buttons, i always got an undefined popup after refresh.
Here's a working demo : http://plnkr.co/edit/6kuqaT7ISpo7uEwLHcZn?p=preview
Please help
Thanks
I checked your plunker cookie is setting properly :-)
Use STOP AND RUN button for refresh :P
I saw similar problem with refresh + $cookieStore some time ago, try using sessionStorage, if your target browser(s) allow that.
What Angular version do you use?
I'm working on an Ionic app that has a "preloader" immediately before the app starts. Ideally I'd like the main page after the pre-loader to appear immediately, instead of slide-in. Is there a way to programmatically define what transition to use on a one-off basis? Normally the sliding is fine, but just not for the transition from the pre-loader to the main menu.
Defining in controller $ionicViewSwitcher and $state
now in ng-click inside a or button tags call:
//here transition name
$ionicViewSwitcher.nextDirection('forward');
//here next state name
$state.go("main.map");
angular.module('YOUR_APP_NAME_HERE').config(function($ionicConfigProvider){
$ionicConfigProvider.views.transition('none');
});
Hope this helps you.
So today I just came across the 'live()' function that binds any future and past elements to the whatever event you choose, such as 'onclick'.
Right now I'm having to set up buttons like the following each time I load a new button via ajax ...
$('a.btn.plus').button({icons:{primary:'ui-icon-plusthick'}});
$('a.btn.pencil').button({icons:{primary:'ui-icon ui-icon-pencil'}});
$('a.btn.bigx').button({icons:{primary:'ui-icon ui-icon-closethick'}});
So, instead of calling these lines each time I use ajax to add a new button, is there a similar way to tell JQuery to setup my buttons ANYTIME I add new ones?
Thanks for any help!
Mmh not really. But there is the function .ajaxSuccess() which is triggered whenever an Ajax call is successful. So you could do:
$('body').ajaxSuccess(function() {
$('a.btn.plus').button({icons:{primary:'ui-icon-plusthick'}});
$('a.btn.pencil').button({icons:{primary:'ui-icon ui-icon-pencil'}});
$('a.btn.bigx').button({icons:{primary:'ui-icon ui-icon-closethick'}});
});
But this will run on any links with the classes, not only on the new ones. But if you append them on a time (i.e. not multiple a.btn.plus at once) you might be able to use the :last selector (a.btn.plus:last).
You can also create a function and just that from your callback functions:
function links() {
$('a.btn.plus').button({icons:{primary:'ui-icon-plusthick'}});
$('a.btn.pencil').button({icons:{primary:'ui-icon ui-icon-pencil'}});
$('a.btn.bigx').button({icons:{primary:'ui-icon ui-icon-closethick'}});
}
and in the Ajax call:
$.ajax({
//...
success: function(msg){
links();
}
});
This way you can pass the parent element to the function in order to find the link only inside this element (so the code would only work on the new links).
A last option would be generate a custom event but in the end this would be similar to just doing a function call in your case so you gain not much.
You can use delegate in your success function too
$("body").delegate("a.btn", "hover", function(){
$(this).toggleClass("hover");
});
There is a Jquery Plugin called livequery which covers your requirements.
I like to think of this plugin as Jquery .live() but without the need for an event ('click') etc.
You can find more info here//
Jquery - Live Query Plugin