I have am trying to use a very simple scrollTo in Angular 1.x. I have naviagation menu link which when clicked should scroll to a div#id. I can only get this to work with a 'promise'.
For example, this works:
<li>Go to Tracking</li>
$scope.tracking = function() { // go to tracking when header button is clicked
$http.get('/includes/modules/get_home_destinations.php')
.then(function(reply){
if (reply.data) {
$scope.destinations = reply.data;
$location.hash('home-tracking');
}
});
};
But this doesn't respond:
$scope.tracking = function() { // go to tracking when header button is clicked
$location.hash('home-tracking');
};
It's as if a promise is required, but to get this to work on the simple click without the promise?
This is because of href="#" as I guess. Because firstly, href redirects page to "#" then the promise is executed with time delay and redirect back page to the desired location. But without promises, there is no time delay, code is executed immediately and href redirects page to '#' and page stuck there.
Hope this below code will be usefull :
in html file
<div id="home-tracking">
<h1>Home Traking Content</h1>
</div>
<a ng-click="tracking()">Go to Tracking</a>
in controller file
angular.module('trackingApp').controller('TrackingCtrl', function($location, $anchorScroll) {
$scope.tracking = function() {
$location.hash('home-tracking');
$anchorScroll();
}
})
Related
I am trying to make a loader that will show on every page and fade out when all the content is loaded. Here is my code so far:
<div id="loader-wrapper" data-loader-drct data-ng-hide="hidden">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div><!--end loader-wrapper-->
app.directive('loaderDrct', [function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.$on('$routeChangeSuccess', function () {
var hide = false;
scope.hidden = hide;
scope.$on('$viewContentLoaded', function () {
hide = true;
scope.hidden = hide;
});
});
}
}
}]);
When I execute this code, the loader is hiding (with some CSS added), but when I go to another page, the loader is not shown again. The ng-hide class is still there, which means that this directive has already been executed and did not refresh after going to the new page.
How can I make the loader show and hide on every page?
ok, I found a solution made by michael. The problem is that the templates are loaded and the browser has no time to make the changes visible . You can find the full answer here: Angular js - show/hide loading gif every new route
For load while upload/download files
Add in index.html
<div id="loading_wrapper">
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
And Add in controller.js
var $loadingWrapper = angular.element('#loading_wrapper');
Note: Make sure whether font-awesome css files installed or not. Otherwise, you can use simply bootstrap components.
I'm using this AngularGrid system and everything is working so far, except when i refresh the page.
In the doc there is an orientation on how to solve this:
To get the reference of instance you need to define angular-grid-id on the element which you can get back by injecting angularGridInstance to any controller or directive. Using your id you can refresh your layout ex : angularGridInstance.gallery.refresh();
And this is what I did:
html
<ul class="dynamic-grid" angular-grid="pics" angular-grid-id="mypics" grid-width="300" gutter-size="10" refresh-on-img-load="false" >
<li data-ng-repeat="port in Portfolio" class="grid" data-ng-clock>
<img src="{{port.img[0]}}" class="grid-img" />
</li>
</ul>
app.js
.directive('myPortfolio', ['mainFactory','angularGridInstance', function (mainFactory,angularGridInstance) {
return {
restrict: "A",
link: function($scope) {
mainFactory.getPortfolio().then(function(data) {
$scope.refresh = function(){
angularGridInstance.mypics.refresh();
}
$scope.pagedPortfolio = data.data;
})
}
}
}])
But if I refresh the page, it still doesn't work. There is some boxes but without image loaded and it's not inside the grid system. Also, I have no errors in my console. When this happens, I can only see the images again if I change to another page and then go back to my portfolio page.
Any ideas on how to solve this?
I think you don't need angularGridInstance and refresh function here. Just change
refresh-on-img-load="false"
to
refresh-on-img-load="true"
in your view.
I have this code that loads the content when the page load,
Now I want to know how to reload the content by clicking the button.
Can you show me how to do it with example please?
Javascript code:
.controller('InterNewsCtrl', function($scope, NewsService) {
$scope.events = [];
$scope.getData = function() {
NewsService.getAll().then(function (response) {
$scope.events = response;
}), function (error) {
}
};
$scope.getData(); // load initial content.
})
Html code:
<ons-toolbar fixed-style>
<div class="left">
<ons-back-button>Voltar</ons-back-button>
</div>
<div class="right">
<ons-toolbar-button><ons-icon icon="ion-android-refresh"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Internacional</div>
</ons-toolbar>
I think you're asking how to just retrieve new events from the backend. If that's correct, you don't need to reload the entire page.
You already have a function called getData which goes and retrieves you data via your service. Assuming your service doesn't cache the data, just call getData from your button:
<ons-toolbar-button ng-click="getData()"><ons-icon icon="ion-android-refresh"></ons-icon></ons-toolbar-button>
P.S. if you do explicitly have the cache set to true in your service, you can remove the cached data with $cacheFactory.get('$http').removeAll();.
For reloading same page in angular Js without post back
first remove that url from template cache if you call $route.reload() without removing it from $templateCache it will get it from cache and it will not get latest content
Try following code
$scope.getdata=function()
{
var currentPageTemplate = $route.current.templateUrl;
$templateCache.remove(currentPageTemplate);
$route.reload();
}
and Call it as following
<input type="button" ng-click="getdata();" value ="refresh"/>
Hope this will help
Please reffer this
I have layout where I have:
<li ng-click="GetLoader();">ACCOUNT</li>
<li ng-click="GetLoader();">SETTINGS</li>
On the index page, I have a menu and ng-view where I can change pages on a click
Also included on the index page is a spinner.
<div class="loading" ng-show="ticketloading" ng-init="GetLoader()">
<div>
<img class="spinner" ng-src="~/Images/ajax-loader.gif" />
</div>
</div>
In my script I have -
$scope.GetLoader = function() {
$scope.ticketloading = true;
loader.css("z-index", "1");
}
My problem is that when a user clicks on "Account" it gets loaded, but just for few milliseconds. Then it changes to all blank. I receive data from ng-view. My question is how can I delay showing ng-view to show the loader a little bit longer.
Thanx in advance!
First of all you should avoid using DOM manipulations in controller. In your case it's better to use declarative ngClass directive to set opacity.
Then your actual issue is that you don't want to use static setTimeout to hide loaded, but rather listen $routeChangeSuccess:
$rootScope.$on('$routeChangeSuccess', function() {
$rootScope.ticketloading = false;
});
and use this loading flag in template like you are currently doing.
You can put above event listener in run block for example.
You can add property in your controller, for example dataLoading and add ng-if attribute to ng-view like this:
layout
<div ng-view ng-if="!dataLoading">
controller
function loadData()
{
var self = this;
self.dataLoading = true;
dataService.loadData(params, function(){
...
self.dataLoading = false;
});
}
i am using angularjs directive to redirect another html page.i am writing click function inside directive but i am getting page name in alert box not redirect to another html page.
sample.html:
<test1>
<button data-ng-click="click('/page.html')">Click</button>
</test1>
sample.js:
app.directive('test1',['$location', function(location) {
function compile(scope, element, attributes,$location) {
return{
post:function(scope, element, iAttrs,$location) {
scope.click=function(path)
{
alert("click"+path);
$location.path('/path');
};
}
};
}
return({
compile: compile,
restrict: 'AE',
});
}]);
i want to redirect page.html how to do this please suggest me.
Thanks.
In html,
<button ng-click="redirect()">Click</button>
In JS,
$scope.redirect = function(){
window.location = "#/page.html";
}
Hope it helps.....
Would probably make a small modification.
inject $location and use:
$scope.redirect = function(){
$location.url('/page.html');
}
The benefits of using $location over window.location can be found in the docs, but here's a summary as of (1.4.x)
https://docs.angularjs.org/guide/$location
If anyone knows how to make this redirect directly from the html in a cleaner way please let me know because I would prefer that sometimes over making a function in the controller...
I have succeeded navigation PAGE with below code in AngularJS.
$scope.click = function ()
{
window.location = "/Home/Index/";
}
In case you are using material design button 'md-button', you could do this.
I have tried giving attribute href, assigned with the link path. The redirection works well.
This could be tried if it is only redirection and there are no other tasks to be done before redirection.
<test1>
<md-button href="/page.html">Click</md-button>
</test1>