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?
Related
I am developing an ionic app where I load content dynamically on click event. I am using $ionicLoading.show() before hitting the API and $ionicLoading.hide() after getting the response.
I wish to retain loading atleast for 3 seconds even if data is completely loaded for some undefined reasons without using $timeout. I tried duration in $ionicLoading.show() but that does'nt help. Is this possible, if so how can I achieve that.
Try this. This will put a duration for the loading animation to show. After 3000 milliseconds the loader will auto hide
$ionicLoading.show({duration:3000});
I'm using Angular v1.3.10 and i'm setting a cookie successfully.
When i'm doing $cookieStore.put(key,value) and then $cookieStore.get(key) i see the object I added.
When i'm refreshing the page and doing $cookieStore.get(key) i get undefined.
Any idea why ?
At first appearance seems correct.
This works for me (version 1.3.0):
$cookieStore.put('MyVar', $scope.myVar);
// After refresh
$scope.myVar = $cookieStore.get('MyVar');
On the other hand, you can see in documentation that $cookieStore is deprecated. You must use $cookies. It's very similar.
Good luck!
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
I'm currently trying to figure out how to change the route parameters without reloading the entire page. For example, if I start at
http://www.example.com/#/page
but update a name to be 'George', to change the route to be:
http://www.example.com/#/page/george
If I already had http://www.example.com/#/page/:name routed.
Without reloading the location. Can one just set $routeParams.name = "George" ?
Edit:
Alternatively, is there a way to update http://www.example.com/#/page?name=George without reloading or resetting the page?
Ok, after a lot of searching. I answered my own question.
I've discovered finding anything on the angular documentation is incredibly impossible, but sometimes, once it's found, it changes how you were thinking about your problem.
I began here: http://docs.angularjs.org/api/ng.$location
Which took me here: http://docs.angularjs.org/guide/dev_guide.services.$location
Which took me to this question: AngularJS Paging with $location.path but no ngView reload
What I ended up doing:
I added $location.search({name: 'George'}); To where I wanted to change the name (A $scope.$watch).
However, this will still reload the page, unless you do what is in that bottom StackOverflow link and add a parameter to the object you pass into $routeProvider.when. In my case, it looked like: $routeProvider.when('/page', {controller: 'MyCtrl', templateUrl:'path/to/template', reloadOnSearch:false}).
I hope this saves someone else a headache.
I actually found a solution that I find a little more elegant for my application.
The $locationChangeSuccess event is a bit of a brute force approach, but I found that checking the path allows us to avoid page reloads when the route path template is unchanged, but reloads the page when switching to a different route template:
var lastRoute = $route.current;
$scope.$on('$locationChangeSuccess', function (event) {
if (lastRoute.$$route.originalPath === $route.current.$$route.originalPath) {
$route.current = lastRoute;
}
});
Adding that code to a particular controller makes the reloading more intelligent.
You can change the display of the page using ng-show and ng-hide, these transitions won't reload the page. But I think the problem you're trying to solve is you want to be able to bookmark the page, be able to press refresh and get the page you want.
I'd suggest implementing angular ui-router Which is great for switching between states without reloading the page. The only downfall is you have to change all your routes.
Check it out here theres a great demo.
I'm trying to solve a problem. I want that when a perform an action or function in the controller to be saved in the brose history. For example, I want to do this:
Type something in a textbox.
Click a link to call a function that will set the string I typed to a variable in $scope and save it at the browser history.
Do the same as the previous step with a different value.
If I click the "back" button from the browser, I want to display the first value I entered.
I have a very simple example of what I want but I don't know what do I have to add to be able to use the "back" and "forward" button from the browser.
http://jsfiddle.net/XMFua/
Thank you very much in advance!
You should use the $location service to set the URL. I don't know how to make it work on jsFiddle, however the following should work:
http://jsfiddle.net/marcenuc/BSDxG/