AngularJS update $ ng-includeとng-repeatのスコープ

<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の値を変更するとデータが出力されます。、ビューは変わらず、なぜですか？どのようにできるのか？

出典

2017-04-04 hiroxi

'$のscope'は' $のscpoe'と同じではありません。また、「子供」と「チルダ」は同じではありません。 – Duncan

あなたの完全なコードを投稿し、 'ng-include =" 'yourUrl' " – Akashii

だから、申し訳ありませんが、いくつかの間違いが、まだ問題です。 – hiroxi

このようにしてください。

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>

出典

2017-04-04 14:39:33

あなたのコードは良いですが、$ scope.folderNamesにレベルがたくさんある場合は適切ではありません（レベルを実行しているexecptの数はわかりません）。もう1つは、$ scopeにいくつかのレベルを追加するときです。 folderNamesでは、ビューでは変更できませんが、値は変更できません。どうして？ – hiroxi

私の更新されたコードを見てください。与えてください.................................. –

okとは、 –

私は、これはあなたが探しているスニペットであると信じています。どのような種類のディレクトリ深度でも再帰的に動作します。

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

出典

2017-04-11 20:25:47 Hskdopi

AngularJS update $ ng-includeとng-repeatのスコープ

答えて

関連する問題