I have the following code to upload my profile image:
file.upload.then(function (response) {
$timeout(function () {
file.result = response.data;
vm.currentUser.profileImagePath = response.data.profileImagePath;
$scope.$apply();
});
}, function (re ...
and with this code the image is refreshed/reloaded after upload and works fine
<div class="userProfileItem userProfileImage" style="background-image: url(api/files/profileimage/{{vm.currentUser.profileImagePath}}/)">
except that I get sometimes the following Browser error:
403 Forbidden - http://localhost:8082/api/files/profileimage/%7B%7Bvm.currentUser.profileImagePath%7D%7D/"
Therefore I have changed code to this one at the bottom. But with the code at the bottom the image is not refreshed automatically.
<div class="userProfileItem userProfileImage" ng-style="{'background-image': 'url(api/files/profileimage/{{vm.currentUser.profileImagePath}}/)'}">
My question now would be how I can solve this issue?
You had {{}} interpolation inside ng-style expression, which is not required there. You could directly get access to scope variable there, use concatenation to form expression.
<div class="userProfileItem userProfileImage"
ng-style="{'background-image': 'url(api/files/profileimage/'+ vm.currentUser.profileImagePath +'/)'}">
Related
I have an external template called _include.tmpl.html it's contents are:
<script id="sBlock1" type="text/ng-template">
<li ng-repeat="user in users" data-customer-id="{{user.CustomerID}}" ng-class-odd="'alternate'" ng-click="GetOrdersForUser($event)">
<span class="name">{{user.ContactName}}</span><br>
<span class="title">{{user.ContactTitle}}</span><br>
<span class="phone">{{user.Phone}}</span><br>
<span class="country">{{user.Country}}</span>
</li>
</script>
I would like to load the external template, feed it my array of users and get the compiled result? I was trying the below with no luck?
$http.get('_include.tmpl.html', { cache: $templateCache })
.then(function (response) {
var test = $compile(response.data)($scope.users);
console.log(test);
});
The use case is - for infinite scroll. You scroll down, I fetch results from a db feed the results to the template, get the compiled html and append that to the DOM. Each time you scroll down you get more results and the results keep getting appended to the DOM element.
You seem to be trying to mimic what a custom directive can already do for you
HTML
<users></users>
JS
angular.module('myApp').directive('users', function(){
return {
templateUrl:'_include.tmpl.html'
};
});
This will make the server side ajax call for you and populate the data. It will also store the template in $templateCache so another call to server isn't needed
However you would need to remove the wrapping script tag which is part of what is currently causing you problems
It should be $compile(response.data)($scope);.
And considering _include.tmpl.html template has been loaded, and sBlock1 is in template cache, it has to be
$http.get('sBlock1', { cache: $templateCache })
.then(function (response) {
var test = $compile(response.data)($scope);
console.log(test);
});
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
In an Angularjs view I have two div blocks:
<div ng-if="countApps() == 0">
</div>
and
<div ng-if="countApps() > 0">
<div>
My controller provides a function to return the number of applications:
$scope.countApps = function(){
return $scope.apps.length;
}
and to get the apps:
//controller
AppService.fetch().$promise.then(function(response){
$scope.apps = response.apps;
})
The problem is that if the http request happens to be slow the div block for 0 apps gets shown for a second or two. Then it will change to the other block once the results load. I would like it to load the apps and then show the correct view.
What if do not define $scope.apps before first AppService.fetch()?
You may define your countApps() method in promise callback
See here
//dummy example from plunker
AppService().then(function(result) {
$scope.apps = result;
$scope.countApps = function() {
return $scope.apps;
}
});
You can use a variable as a flag and set it to true in the promise.
This way you only need to create on div and not use another div for zero case.
AppService.fetch().$promise.then(function(response){
$scope.apps = response.apps;
$scope.app_present = true;
})
<div ng-if="countApps() && app_present">
This will only be shown when you get response.
<div>
EDIT:-
In my opinion you should not have two div's rather based on the response you should add custom message in the promise part only, promise part should be used for assignment purposes.
Also if there are other divs for countApp() === 0 case then logic for that should also in the promise part. Avoid creating div's for different values of response doesn't look good in the code.
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'
I have have a page where I am using plupload to upload files and having a weird issue with a ng-repeat not updating properly. Here is the relevant code:
<div ng:app>
<div name="myForm" ng-controller="Ctrl">
<input ng-model="test" type="text" />{{test}}<div id="container" class="controls">
<div id="filelist">
<div ng-repeat="file in filesToUpload">{{file.name}} ({{file.size}}) <b>{{file.percent}}</b></div>
</div>
<br />
<a id="pickfiles" href="#">[Select files]</a>
</div>
</div>
</div>
function Ctrl($scope) {
$scope.test = '';$scope.filesToUpload = [{id: 1, name: 'test', size: '123kb'}];
$scope.addItem = function(object) {
$scope.filesToUpload.push(object);
}
$scope.uploader = new plupload.Uploader({
runtimes : 'html5,flash,browserplus,gears',
browse_button : 'pickfiles',
container : 'container',
max_file_size : '10mb',
url : 'upload.php',
flash_swf_url : '/plupload/js/plupload.flash.swf'
});
$scope.uploader.init();
$scope.uploader.bind('FilesAdded', function(up, files) {
$scope.filesToUpload = [];
$.each(files, function(i, file) {
$scope.addItem({
id: file.id,
name: file.name,
size: plupload.formatSize(file.size)
});
});
console.log($scope.filesToUpload);
up.refresh(); // Reposition Flash/Silverlight
});
}
Here is a trimmed down jsfiddle showing the issue happening:
http://jsfiddle.net/9HuUC/
To reproduce this issue do the following:
Click on [select files] and selects a few files (notice how you don't see the files displayed anywhere on the output)
Type any character into the input box (magically the files that you select know appear)
What would cause this type of behavior? I mean I know that the data is properly being set in $scope.filesToUpload because I have the console.log() there and even checked it in Batarang and it loods good there but for some reason something else needs to be updated for the display to be updated.
Interestingly enough, I have another ng-repeat that is working fine on the same page. I am wondering if it has anything to do with where the code is (being inside the FilesAdded event on the uploader).
The issue is due to the fact that the FilesAdded callback is executed outside the scope of AngularJS (it's called by the uploader), therefore the scope updates won't be triggered.
To solve this, just add the $scope.$apply call in the callback, encapsulating your existing code:
$scope.uploader.bind('FilesAdded', function(up, files) {
$scope.$apply( function() {
$scope.filesToUpload = [];
$.each(files, function(i, file) {
$scope.addItem({
id: file.id,
name: file.name,
size: plupload.formatSize(file.size)
});
});
console.log($scope.filesToUpload);
up.refresh(); // Reposition Flash/Silverlight
});
});
With this update, it's working in the fiddle. For reference see the AngularJS official documentation, $apply method of the scope object:
http://docs.angularjs.org/api/ng.$rootScope.Scope