javascript - Angular : how to load data on a partial?

标签 javascript html angularjs

我正在使用 Angular,我正在尝试在单击按钮时更新 ng-view 的数据,但它不起作用。这是我的代码片段。 主页

<body ng-app="app">

<div ng-controller="MyController" >

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

    <div ng-view></div>

    </div>

</body>

ng View :

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

加载数据函数:

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

我想在点击链接时加载数据。但它不起作用。我有一个 plunker如果有人可以帮助我,请在这里。 谢谢

最佳答案

1)

因为它是异步调用,最简单的方法是将 var 更改包装在 $timeout 回调中:

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

这基本上是强制范围摘要,而您不必担心摘要阶段。当然,不要忘记将 $timeout 注入(inject) Controller 。

如果您仍想手动执行摘要,可以执行 $scope.$apply()


2)

您还需要修复您的 JSON,正如我在评论中展示的那样:

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

3)

无需两次分配同一个 Controller 。

在路由中指定 Controller 会导致 Controller 产生一个新范围(每次单击该 anchor 时都会加一个范围,除非您删除 href 属性或以其他方式阻止它)。我通过删除 Controller 指令来修复它:

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

因此,无需指定 Controller ,除非它是与 ng-view 所在的 Controller 不同的 Controller 。在你的情况下,情况并非如此(你只使用了 View 已经在其中的 Controller )并且它导致两个不同的 Controller /范围(如果单击它时 anchor 中存在 href 属性甚至更多)产生并且一个范围内的 $scope.datas 不是绑定(bind)到部分范围内的 $scope.datas

由于范围父/子继承,不同的变量名将起作用;因此,如果变量名称不匹配,父作用域变量将在子作用域中可用而无需特定定义。

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

关于javascript - Angular : how to load data on a partial?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26149904/

相关文章:

php - 如何从不同页面的 Ajax 下拉列表中检索值? PHP

javascript - 解析云查询以获取具有最近 GeoPoint 的对象

javascript - 我是否需要担心管理 html5 localStorage 的大小,或者是否会自动删除最近最少使用的项目?

javascript - 路径上的 D3 事件不起作用

javascript - 使用 AngularJS ng Repeat $index 来命名模型

javascript - 微软语音识别+nodejs

javascript - 如何确保具有不同复选框的其他选项

html - 如何阻止 <nav> 在中间 split

angularjs - 如何查找更改正在监视的对象的调用站点

javascript - 输入类型日期 ng-model 不允许日期数据