AngularJS在ng-include和ng-repeat中更新$ scope [英] AngularJS update $scope in ng-include and ng-repeat
本文介绍了AngularJS在ng-include和ng-repeat中更新$ scope的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<ul>
<li ng-repeat="folder in folderNames" ng-include="'test.html'">
</li>
</ul>
<script type="text/ng-template" id="test.html">
<ul> {{ folder.name }}
<li ng-repeat="folder in folder.children" ng-include="test.html"></li>
</ul>
</script>
<script>
$scope.folderNames = [{
name: 'a',
children: [{
name: 'b',
children: []
}]
}];
</script>
我想像树一样输出数据，但是当我使用ng-click事件函数更改$ scope.folderNames值时，实际上视图没有改变，为什么?我该怎么办?
I want to output the data like a tree, but when I use the ng-click event function to change the $scope.folderNames value.But in fact, the view do not change, and why? How can I do?
推荐答案
尝试这样.
var app = angular.module("myApp",[]);
app.controller('ctrl',['$scope', function($scope){
$scope.showFolders = function(){
$scope.folderNames = [{
name: 'app',
children: [{
name: 'css',
children: []
},{
name: 'images',
children: []
}]
},{
name: 'folter1',
children: [{
name: 'sub-folder1',
children: []
},{
name: 'sub-folder2',
children: [{ name: 'sub-folder 2.1',children: [{
name: 'second-sub-of-sub',children: []},{
name: 'sub-of-sub',
children: []
}]
},{
name: 'sub-of-2.2',
children: []
}]
}]
}];
}
}]);<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="ctrl">
<button ng-click="showFolders()">View folders</button>
<ul>
<li ng-repeat="folder in folderNames">
{{ folder.name }}
<ul ng-include="'test.html'"></ul>
</li>
</ul>
</div>
<script type="text/ng-template" id="test.html">
<li ng-repeat="folder in folder.children">{{folder.name}}<ul ng-include="'test.html'"></ul>
</li>
</script>
</body>
</html>这篇关于AngularJS在ng-include和ng-repeat中更新$ scope的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
