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

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>

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? 我希望像树一样输出数据，但是当我使用ng-click事件函数来更改$ scope.folderNames值时。但实际上，视图不会改变，为什么？ How can I do? 我能怎么做？

Answer 1

Try like this. 试试这样吧。

 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

I believe that this is the snippet you are looking for. 我相信这是你正在寻找的片段。 It works recursively with any kind of directory depth. 它以任何类型的目录深度递归地工作。

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']);
});

View online example here 在此查看在线示例

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-04-04 14:39:33

解决方案2
0 2017-04-11 20:25:47

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-04-04 14:39:33

解决方案2 0 2017-04-11 20:25:47

解决方案1
0 已采纳 2017-04-04 14:39:33

解决方案2
0 2017-04-11 20:25:47