Question

<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值时。但实际上，视图不会改变，为什么？我该怎么办？

Answer 1

试试这样。

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>

Answer 2

我相信这是您正在寻找的片段。它可以递归地处理任何类型的目录深度。

angular.element(document).ready(function(){

angular.module('application', [])
 .directive("navigation", ['$compile',function ($compile) {

    return {
        restrict: 'E',
        replace: true,
        scope: {
            menu: '='
        },
        template: '<ul><li ng-repeat="item in menu">{{item.Name}}<span ng-if="item.Children.length > 0"><navigation menu="item.Children"></navigation></span></li></ul>',
        compile: function (el) {
            var contents = el.contents().remove();
            return function(scope,el){
                $compile(contents)(scope,function(clone){
                    el.append(clone);
                });
            };
        }
    };

}])

.controller('myController', ['$scope','$log',function ($scope,$log) {
    $log.log('In Controller');
    $scope.menu = [{
        Id: 1,
        Name: "Contact",
        Children: [{
            Name: "Testing",
            Children: []
        },{
            Name: "More Testing",
            Children: [{
                Name: '3rd Level',
                Children: []
            }]
        }]
    }];
}]);

angular.bootstrap(document,['application']);
});

查看在线示例here

AngularJS在ng-include和ng-repeat中更新$ scope

2 个答案: