In my Angular app, some routes have reloadOnSearch set to false so that Bootstrap tabs work ok.
The problem comes when a link in one of those views links to another of those views. Links just don't work, because the controller does not reload the view.
So I have to use ng-click on those links.
$scope.goToThisPage = function () {
$location.path(newPage);
$route.reload();
};
However, that does not work and always takes me to the default routing. Same happens if I replace the last line of the function with $scope.$apply().
What is the best way to move between routes that have reloadOnSearch set to false?
Do you have a separate controller for each of those tabs?
As far as I know, reloadOnSearch: false will only prevent the controller from reloading if a query parameter or hash in the url changes. So, moving between /route/page?param=1 and /route/page?param=2 will not reload the controller, but moving to /route/anotherpage definitely should.
I don't understand entirely how you're getting this issue, but for what it's worth, this is how I've solved reloadOnSearch issues when I having a single controller. Even though the controller and view don't reload when a search parameter changes, $location still does, so I would just listen to $locationChangeSuccess in the controller and make any changes to bound scope variables in the callback.
Edit
Looking at the documentation for tabs, wouldn't it be possible for you to just not use links to switch the tabs, and instead call the .tab("show") method using ng-click?
Related
In my angular app, I have this issue. When user quickly double-clicks link to state (ui-sref link), the target state begins loading twice. This would be bearable, if the state window didn't freeze and stop responding to other state changes. When clicking another ui-sref links, URL changes accordingly, http calls on background are made, but the view is frozen.
I need to know, how can I prevent any transition, when there is another transition already trying to resolve promise. I know I can somehow work magic with $stateChangeStart and event.preventDefault(). What I don't know is how to allow my transition to continue after resolving it's resolve block and how to counterpart event.preventDefault().
Thanks for your time. Any advice will be greatly appreciated.
Angular UI Router's $state object has a property on it, 'transition', which will be present if it is in the middle of an active transition. One option is to remove the ui-sref attribute and use a ng-click attribute instead. Inside your ng-click function, you can do a manual check for the presence of the transition object before invoking $state.go().
Before
HTML:
<a ui-sref="Root.State1">
After
HTML:
<a href="" ng-click="goToStateOne()">
JS:
scope.goToStateOne = function() {
if (!$state.transition) $state.go('Root.State1');
}
I've found a weird behavior in AngularJS when clicking links. My goal would be to prevent the page to refresh when the path is the same, and only the query string changes.
The strange thing is that this happens already... but only sometimes. At least in my particular scenario, some links trigger the page refresh, and some others simply not, even when they look the same (except minor changes like ones having a title attribute and others not).
<a class="btn btn-primary" ng-href="https://.../search?_target=event&...>Edit</a>
Besides this odd thing, which perhaps is the result of me doing something wrong, I would like to ask for the common way of avoiding page refresh on link clicks, and if possible when someone manually changes the URL, but only the query string. It's annoying to have to wait for the whole app to load just because you wanted to activate some particular pop-up, for instance.
Note that I have the HTML5 mode enabled.
Thanks.
It looks like you're using absolute links in your <a> tags.
You should use your router's links (if you're using ui-router it's ui-sref to navigate state).
[EDIT]
The problem seems to be a lot different, so here's another wording:
"I need to display a popup based on my state params in all of my states, whenever my state changes".
So here's how to do it:
The logic says that since you have to display this in all of your state changes, you should hook a $stateChangeSuccess function (docs).
That way, you can implement your logic there and display pop-ups and everything. I suggest you put this into your app.js file or if the app is relatively large in some events.js file or whatever you prefer
angular.module('your_app_name').run(function($rootScope){
$rootScope.$on('$stateChangeSuccess',
function(event, toState, toParams, fromState, fromParams){
// you have your toParams, your toState and everything here, so use your logic to open your popup window.
})
});
I want to disable all the functionalities provided by Angularjs, but only after the pages and all components have been loaded fully.For example "ng-click" should not work any more.
I tried to set the "ng-click" attr to null but, it still works when clicked.
Thank you
You can destroy angular app $scope that means it will disable only two way binding of scope variables using $scope.$destroy() method nothing more than that(If you want to disable two way binding on start up load then you need call $destroy() in $timeout).
But the event listener won't get disabled from angular app which are register while angular app is initialized on page. You can only achieve this by maintaining any flag (this is hacky way).
Here is Fiddle which demonstrate what i want to say.
Thanks.
tldr;
I need to fire a custom directive/jQuery plugin on ng-click and pass a parameter to it then reload that page so the parameter's value takes place. So on reload instead of there being 3 results in my Google Map, there should be 50 results showing.
Disclaimer
I've done a ton of reading on firing directive on ng-click as well as passing parameters to directive (particularly this question and this question and this question) but I am fairly new to AngularJS so I'm still a bit naive to all the greatness of Angular and how to utilize it properly...
Background
I created a jQuery plugin for a Google Maps API app I'm creating. The app is using AngularJS also. The plugin creates a map and shows 3 locations to the user plugin code here. Under the map I have the list of 3 locations in a table. I also have a button that says more results which should return 50 more locations.
Question
What is the best way to...
Pass a new parameter to my plugin/directive? Currently on page load I load the directive and fire the plugin by <div tfinder-map="{queryLimit: 3}">. Ideally I'd like to be passing 50 when I click the more results button.
Along with passing the param to my directive/plugin on click of more results, I would like it to essentially fire the directive and reload the page so the 50 results show up, instead of just 3.
After reading other questions, I think passing a param to my directive would go something like this (although I'm sure the syntax is wrong):
ng-click="tfinder-map(queryLimit: 50)"
And to be able to persist that value as the page reloads, the only way I could think to do that would be via a query string argument in the URL.
I also did a little reading about $route.reload() which sounds interesting, I just don't know the best way to implement this to do a reload with params.
The code
My current directive looks like this:
directive('tfinderMap', function() {
return {
restrict: 'A',
link: function(scope, elm, attrs) {
$(elm).tfindermap(scope.$eval(attrs.tfinderMap));
}
};
})
And in jQuery it'd be
$('#foo').tfindermap({queryLimit: 3})
The actual jQuery plugin can be viewed here on Github
Also, here's the UI if it helps visualize it
clicking the more results button should make 50 results appear as opposed to 3
In Ember.js on an ObjectController there is a function init() which fires when the controller is instantiated. Is there a way I can fire some additional code, when the controller leaves context?
Here is what I am doing in the init():
init: function() {
jQuery("body").css("background-color", "#f2f1ec");
}
On the controller exit, or lose context I want to simply change the background color again:
jQuery("body").css("background-color", "#333333");
Thanks.
I would create a custom view and write make the css changes on didInsertElement instead of handling it in the controller. In this particular case, since you're operating on the body element, you might even be able to get away with doing it in the activate and deactivate functions of the route you're looking to target. (It might be a problem if you're doing it on ApplicationRoute though. Not sure if that is entered before are after document.ready()
Here's a fiddle using the Router's activate and deactivate functions.
And here's an example of the custom view.