I am having a problem with Photoswipe and Angular. Basically what I'm doing is get the images from my server using $http.post and then pushing those objects into my array of images, then I'm initializing Photoswipe.
In my success I have something like this:
$scope.gallery.push(images from server);
myPhotoSwipe.initialize()
But I get this error: Code.PhotoSwipe.createInstance: No images to passed, so the initialize is getting fired before all my items are in the view.
I can see all the images in my view but of course they are not attach to Photoswipe, any idea of how can I initialize it only after all my images are in the view?
PS: I have already tried this: How can I get directive to fire after view loaded? but it didn't work for me
Thanks!
Related
I must check data in API every for example 5sec and pass to array which is binding to html. When I invoke function in $interval like this:
$interval(refreshData, 5000);
It works, but destroy any other action which I doing for example close dropdowns etc.
What is the best way for create GET in specific interval?
I saw that in Firefox is ok, only Google Chrome,cancel any actions like coil selected dropdown list etc. when I load data to variable in promise. Anyone have idea why it happen?
I am calling $http.get to get new content from the server for angular ui grid. On change of date in the datepicker I trigger an ng-change event to make another http call to get new content. The call is successful but the grid is not updated with new content.$scope.grid.core.notifyDataChange() throws error when called inside the http success call back.Please suggest ways to update the grid with new content.
Please find the plnkr code. when I click load button, I want to update grid with new JSON data using http call but it is not updating grid. http://plnkr.co/edit/S2A3scEoO6QIGFbru3Lr?p=preview
The problem with your example is inside $http's success method(lines 256-260).
$http.get(...).success(
function(data){
$scope.roData = data;
});
There you are just putting your data inside a scope property ($scope.roData), but then you're not doing anything with that scope property.
Furthermore you're trying to assign a wrong value to uiGrid.gridOptions.data with the lines:
if($scope.gridOptions.data ==='rData'){
$scope.gridOptions.data = 'roData';
}
But you did 2 mistakes:
Treating variables as string, and this is not going to work. Inside your JS files you need to access your scope with $scope.nameOfVariable not by using their names as strings like 'nameOfVariable'.
You put these lines outside of your success method, so they are executed before you actually get your data.
I managed to edit your plunker and make it work, you can find it here.
What I did was putting your lines together and fix the name error. I did not put there any if since I don't know what logic you wanted to accomplish.
$http.get(...).success(
function(data){
$scope.roData = data;
$scope.gridOptions.data = $scope.roData;
});
I am having trouble having highcharts bind to a dynamic chartConfig using this approach
where charts is an object in the controller housing multiple charts by the keys "{{moment}}_a".
When the page resolves, the highcharts has the right output, for e.g.
config="charts['ABC-DEF_a']" but the chart and data don't display. If I manually type the same config="charts['ABC-DEF_a']" into the page, it displays fine.
How do I ensure that highcharts binds to the variable referenced?
Thanks
If you use for example config="chartConfig" you edit it via controller by $scope.chartConfig = {}; and after any dynamic change you must call $scope.$apply();
I'm new to angular and trying to figure out how best to accomplish this.
Say you have set up an ngResource factory to get a bunch of widgets . You return those widgets(GET /api/widgets) and display them on the page in a list.
Now say you can edit those widgets in a dialog box by clicking an edit button next to the object in the list. Is it better practice to pass the individual widget's data (that was already retrieved by the first $resource call) to the edit dialog, or simply pass an ID parameter to the dialog box and have it resolve it's own $resource call using a separate GET /api/widgets/:widgetID call.
The data wouldn't realistically change between loading the list and clicking the edit button, so it doesn't need to be synced to the exact second. Both of these requests would come from the same factory, but the question is if you should store the data and pass it, or execute a separate request.
I don't see a reason to fetch it again, I would just reuse the object.
I have a set of files in a server which I am looping though and constructing a JSOn and saving it as a separate file. I am using python for this. Works quite well. Now the scope is the number of files in the directory will increase/ change throughout the day..and I am running the script every 10 min to rewrite the json...the file name stays same and i am calling it in a single page html document using angular.js..Again fairly simple...But now I am having problem when the JSON is changing I am not seeing any change on the page unless I reload the page. Could I do something about this?
With angular I am using
$http('something.json').success(callback function with some argument data)
and in the markup something like
<ul>
<li ng-repeat="x in data">{{x.id}}</li>
</ul>
Your call to $http is one-time operation which happens after page load like this:
$http('something.json').success(function(data){
$scope.data = data;
});
angular is kickstarted
ng-controller containing $http request is evaluated and request for 'something.json' is sent
...
when your json arrives, your success function is called with data from json
view (html template) is updated with new data
Angular keeps your model (eg $scope.data) and UI (expressions in template) up to date, but it doesn't update external resources.
If you want to periodically poll for changes in 'something.json'
you can use $timeout service as suggested in JaKXz's comment.