AngularJS：如何部分加载数据？

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. 我正在使用Angular，并且在我们单击按钮时尝试更新ng-view的数据，但是它不起作用。 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: ng-view：

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

The loadDatas function : loadDatas函数：

  $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 谢谢

Answer 1

1) 1）

Since it's an async call, the easiest way would be to wrap the var change in a $timeout callback: 由于它是一个异步调用，所以最简单的方法是将var更改包装在$ timeout回调中：

  $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. 当然，不要忘记将$ timeout注入控制器。

If you still want to do the digest manually, you can do $scope.$apply() . 如果仍要手动执行摘要，则可以执行$scope.$apply() 。

2) 2）

You also need to fix your JSON as I have shown how you in the comments: 您还需要修复JSON，就像我在注释中显示的一样：

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

3) 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). 在路由中指定控制器会导致控制器产生一个新的作用域（每次单击锚点都会加一个作用域，除非您删除href属性或以其他方式阻止它）。 I fixed it by removing the controller directive: 我通过删除controller指令修复了它：

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. 因此，无需指定控制器，除非它是与ng-view所在的控制器不同的控制器。 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. 在您的情况下，情况并非如此（您仅使用视图已在其中的控制器），并且这导致了两个不同的控制器/作用域（如果您在锚点上单击时存在href属性，甚至还有更多）和$scope.datas在一个范围不是$scope.datas在被绑定到局部范围。

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 这是工作版本： http : //plnkr.co/edit/QWPFAakvNEdJzU50LKSx?p=preview

Answer 2

You forgot to inject the $http in your controller : 您忘记将 $http 注入到控制器中 ：

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

Take a look at this one: var name changed plnkr . 看一看： var name更改为plnkr 。

AngularJS：如何部分加载数据？

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-10-01 20:23:45

1) 1）

2) 2）

3) 3）

解决方案2
2 2014-10-01 20:23:54

AngularJS：如何部分加载数据？

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-10-01 20:23:45

1) 1）

2) 2）

3) 3）

解决方案2 2 2014-10-01 20:23:54

解决方案1
2 已采纳 2014-10-01 20:23:45

解决方案2
2 2014-10-01 20:23:54