1

I have table in this template which is being updated on ajax requests. Initially this table is empty. And when I click on the button triggering the request, the data flow is going fine but it is not reflected on the table. The table is not getting displayed at all.

Also I have a loader which displays on triggering the ajax requests. Even that is not working when I put these parts of my html inside a ng-view template. Is ng-view not supposed to be used like this? If yes, are there any other alternatives in AngularJS to solve this templating problem?

index.html: Contains a ng-view div which is being substituted by something.html

core.js: I have a get request getting the data into my "tables" variable by clicking on some button in the index.html. I have checked (using console.log) that the data is coming right and getting stored, the problem is that this change in the data is not getting reflected in the website.

something.html: Contains the code displaying the table using ng-repeat.

S Panfilov
  • 16,641
  • 17
  • 74
  • 96
Harish Gajapathy
  • 121
  • 1
  • 8
  • I can post some code snippets if needed – Harish Gajapathy Mar 24 '16 at 08:52
  • Yes. paste formatted code. Also you can try https://jsfiddle.net/ – kudlatiger Mar 24 '16 at 08:53
  • Hey I got the change successfully reflected in something.html as long as I am generating the get request by clicking on a button belonging to something.html. But if a button belonging to index.html is used to generate a get request then the changes are not getting reflected in the something.html (which is a partial). – Harish Gajapathy Mar 25 '16 at 10:37

1 Answers1

0

I think we cannot help without code (here or jsfiddle) but here is what I want to say:

  1. I think it's not about ng-view;

  2. Yes, there is at least one good alternative to replace ng-view - it's ui-router (it's provide ui-view). Ui-router is much more powerful, but more complicated. For you purpose, ui-router have a resolve section, where you should put all request that should be done before page load;

  3. Also, if you need sorting, filtering and more rich function in your ajax-bsed tables, it's will be a good choice to use ngTables library.

  4. Perhaps the problem is that you didn't provide your data to html. I mead when you get data from server into data variable, you should provide it to the html via scope: $scope.data = data;

After that you will be able to use it in html like <div ng-bind="data"></div>

  1. How do you make your AJAX calls? Do you use $http or $resource services? If no (if you use it with jquery for example), you should use $scope.apply() after this.

So, in this case you should call $scope.apply() each time when you update data with non-angular tools;

P.S. You may ask why not <div>{{data}}</div>. You know, it's perhaps the same, but angular developers suggest to use ng-bind instead of {{var}} always when it's possible (look at this question).

Community
  • 1
  • 1
S Panfilov
  • 16,641
  • 17
  • 74
  • 96