Angularjs : how to load data on a partial?

Question

I am working with Angular and i am trying to update data of a ng-view when we click on the button but it's not working. Here my code snippet. main page

<body ng-app="app">

<div ng-controller="MyController" >

<a href="#" ng-click="loadDatas()">Load datas</a>

    <div ng-view></div>

    </div>

</body>

The ng-view:

<div>
  {{myValue}}
</div>
<div>
<li ng-repeat ="data in datas">
  {{data.name}} || {{data.value}}
</li>
</div>

The loadDatas function :

  $scope.loadDatas = function(){
     $http.get('data.json')
       .then(function(res){
          $scope.datas = res.data;                
        });
  };

I want to load datas when the link is clicked.But it's not working. I have a plunker here if someone could help me. Thanks

Shomz · Accepted Answer · 2014-10-01 22:01:48Z

1)

Since it's an async call, the easiest way would be to wrap the var change in a $timeout callback:

  $scope.loadDatas = function(){
     $http.get('data.json')
       .then(function(res){
          $timeout(function(){
              $scope.datas = res.data;
          }, 0);
        });
  };

This basically forces a scope digest without you having to worry about the digest phase. Of course, don't forget to inject $timeout into the controller.

If you still want to do the digest manually, you can do $scope.$apply().

2)

You also need to fix your JSON as I have shown how you in the comments:

{"name":"Dan","value":"13"},
{"name":"John","value":"34"},
etc...

3)

No need to assign the same controller twice.

Specifying the controller in the route cause the controller to spawn a new scope (and plus one each time that anchor is clicked, unless you remove the href attribute or block it in another way). I fixed it by removing the controller directive:

when('/', {
    templateUrl: 'partial.html'
  }).

So, there was no need to specify a controller unless it's a different controller than the one the ng-view is inside of. In your case, that was not the case (you only used a controller that the view is already in) and it was causing two different controllers/scopes (even more if the href attribute is present in the anchor when you click it) to spawn and $scope.datas in one scope is not the $scope.datas in the scope that was bound to the partial.

A different variable name would work because of the scope parent/child inheritance; so if the variable names don't match, a parent scope variable would be available in the child scope without specific definition.

Here is the working version: http://plnkr.co/edit/QWPFAakvNEdJzU50LKSx?p=preview

Thank you for your explanation. But i cannot still display ng-repeat value
Sorry, there's something else wrong besides JSON. Here is an example of a proper JSON (shortened it a bit): {"data":[ {"name":"Dan","value":"13"}, {"name":"John","value":"34"}, {"name":"Vick","value":"21"} ]}
Something is creating new scopes on each loadDatas call. Still on it.
I think you're right your answer give many information. I accepted because he provide me a working plunker. But i think i will change to help others people to have valuable info you provide

Denis C de Azevedo · Accepted Answer · 2014-10-01 21:35:03Z

2

You forgot to inject the $http in your controller:

app.controller("MyController", function($scope, $http) {

Take a look at this one: var name changed plnkr.

edited Oct 1, 2014 at 21:35

answered Oct 1, 2014 at 20:23

Denis C de Azevedo

6,3072 gold badges34 silver badges49 bronze badges

6 Comments

Pracede Over a year ago

I've updated the plunker and still cannot display datas

Denis C de Azevedo Over a year ago

I don't know why (yet), your variable called datas has some problem. When I changed to newName for example, it worked. You don't even need the $timeout. And, as Shomz stated, the JSON is malformed.

Denis C de Azevedo Over a year ago

This is working: plnkr. That's really weird why the $scope.data is not working :(

Pracede Over a year ago

Thanks a lot. Now i remember that to access the whole json response we have to use res.data and here data is not a json key as we did. See docs.angularjs.org/api/ng/service/$http

Shomz Over a year ago

Yeah, I explained in my answer why that is. There is a child scope of that controller (coming from the controller definition in routes), and that's what the partial uses. Different variable name causes propagation to work (which it doesn't if two child/parent scope variables have the same name).

|

Collectives™ on Stack Overflow

Angularjs : how to load data on a partial?

2 Answers 2

1)

2)

3)

9 Comments

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1)

2)

3)

9 Comments

6 Comments

Related