AngularJS在更新$範圍NG-包括和NG-重複

<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單擊事件函數改變$ scope.folderNames value.But其實，視圖不會改變，爲什麼？我能怎麼做？

來源

2017-04-04 hiroxi

'$ scope'是不一樣的'$ scpoe'。另外'孩子'和'childer'不一樣。 – 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遍歷它的數量）。另一方面，當我在$ 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在更新$範圍NG-包括和NG-重複

回答

相關問題