Angularjs:如何在分部上加载数据

Angularjs : how to load data on a partial?

本文关键字：加载 数据 Angularjs      更新时间：2023-09-26

我正在使用Angular，当我们点击按钮时，我试图更新ng视图的数据，但它不起作用。这是我的代码片段。主页

<body ng-app="app">
<div ng-controller="MyController" >
<a href="#" ng-click="loadDatas()">Load datas</a>
    <div ng-view></div>
    </div>
</body>

ng视图：

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

loadDatas函数：

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

我想在点击链接时加载数据。但它不起作用。如果有人能帮我的话，我这里有个大麻烦。感谢

1）

由于这是一个异步调用，最简单的方法是将var更改封装在$timeout回调中：

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

这基本上强制进行范围摘要，而不必担心摘要阶段。当然，不要忘记在控制器中注入$timeout。

如果你仍然想手动做摘要，你可以做$scope.$apply()。

2）

你还需要修复你的JSON，正如我在评论中展示的那样：

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

3）

无需为同一控制器分配两次。

在路由中指定控制器会导致控制器生成一个新的作用域（每次单击该锚点时加上一个作用域，除非删除href属性或以其他方式阻止它）。我通过删除控制器指令修复了它：

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

因此，没有必要指定控制器，除非它与ng视图所在的控制器不同。在您的案例中，情况并非如此（您只使用了视图已在其中的控制器），并且它导致了两个不同的控制器/作用域（如果单击时锚中存在href属性，则会更糟）的生成，并且一个作用域中的$scope.datas不是绑定到分部的作用域的$scope.datas。

由于作用域父/子继承，不同的变量名会起作用；因此，如果变量名称不匹配，那么在没有特定定义的情况下，父作用域变量将在子作用域中可用。

以下是工作版本：http://plnkr.co/edit/QWPFAakvNEdJzU50LKSx?p=preview

您忘记在控制器中注入$http：

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

看看这个：var name更改了plnkr。

相关文章：