我正在使用 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
。
由于范围父/子继承,不同的变量名将起作用;因此,如果变量名称不匹配,父作用域变量将在子作用域中可用而无需特定定义。
关于javascript - Angular : how to load data on a partial?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26149904/