My angular.js knowledge is very limited. Currently I have an image loading via
<img class="main" ng-src="{{URL}}{{magazine[pdf][page].url}}"/>
This works fine, so I won't bother with the js code. I wish to get an alert when the image has loaded. So I changed the code to
<img class="main" ng-src="{{URL}}{{magazine[pdf][page].url}}" onload="preLoad()"/>
angular.js
$scope.preload = function() {
alert("Image is loaded");
};
When the image loads initially I get no alert. When I refresh the page and the image is loaded from cache, then I get an alert. What am I missing here?
Not the best implementation I stumbled across, but it seems to work;
I gave the HTML element an id
<img class="main" id="mainImage" ng-src="{{URL}}{{magazine[pdf][page].url}}"/>
And added this jScript at the end of my controller
var imageLoaded = document.getElementById('mainImage');
imageLoaded.onload = function () {
alert ("Image has loaded!");
};
I'm not sure exactly why this works over my original implementation but im leaving this here for anyone else looking for a 'solution'
Related
I'm using this angularjs well known function to display my anchored div:
$scope.scrollTo = function(id) {
$location.hash(id);
$anchorScroll();
}
This is the view :
<div id="foo-{{$index}}"></div>
Scroll to #foo
Now, the problem :
It is working, but, the whole body of the page is mooving when cliking. So i can't see my fixed top navbar any more.
maybe you already have encoutered this problem ?
I'd like my html body not to be able to moove when cliking an anchor, how should i do ?.
Thank you a lot if you have any idea.
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 am getting the data from javascript object using below method in another page.I want to use this data to print on html page using angular js....Below is snippet of code I am using.
app.controller('tableCtrl', function($scope,$http,$window) {
console.log($window.result);
});
But it is not working
Try
$window.document.write(result);
will overwrite current document and write your result
$window.document.write(result);
if you want it in any of you html page include below snippet
in Html
<div ng-controller="tableCtrl">
<span ng-bind="result"></span>
</div></code>
in tableCtrl
$scope.result = result; //whatever your result is
I want to show a "Loading..." message while loading json data in my AngularJS app. Showing the message and loading the data is done in my main module's run block. The problem is that the browser hasn't rendered the DOM when the run block is executed so the message is not shown. When exactly is the run block executed? How could I achieve what I want: first show the page, then start loading data and display a message?
My code is here: www.esatoivola.net/kirkkovuosi
"When exactly is the run block executed?"
Run blocks - get executed after the injector is created and are used to kickstart the application. Only instances and constants can be injected into run blocks. This is to prevent further system configuration during application run time. -- Module docs
.
"How could I ... first show the page, then start loading data and display a message?"
You could use ng-show and a $scope or $rootScope property (initially set to true) to control showing the "Loading" message. Your main controller can load the data, and when the data comes back, set some $scope property tied to the view and set the "showLoadingMessage" property to false.
HTML:
<div ng-controller="MyCtrl">
<div ng-show="showLoadingMessage">Loading... </div>
<ul>
<li ng-repeat="item in data">
....
</li>
</ul>
</div>
Controller:
function MyCtrl($scope, $resource) {
$scope.showLoadingMessage = true;
var dataResource = $resource('/somewhere/else');
dataResource.query( function(data) {
$scope.showLoadingMessage = false;
$scope.data = data;
});
}