脚本宝典收集整理的这篇文章主要介绍了angular三级联动组件编写，树形组件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
.directive('treeView', [function() {
return {
restrict: 'E',
templateUrl: '/treeView.html',
scope: {//隔离作用域
treeData: '=',
canChecked: '=',//隔离scope和父scope的双向绑定
textField: '@',//单向 父scope属性值改变时，directive的scope值也会跟这改变，但是相反就不行
itemClicked: '&',
itemCheckedChanged: '&',//当 directive 中有动作需要更新到父 scope 中的时候，可以在父 scope 上下文中执行一段代码或者一个函数.
itemTemplateUrl: '@'
},
controller: ['$scope', function($scope) {
$scope.itemExpended = function(item, $event) {
item.$$isExpend = !item.$$isExpend;
$event.stopPRopagation();
};
$scope.getItemIcon = function(item) {
var isLeaf = $scope.isLeaf(item);
// if (isLeaf) {
// return 'fa fa-leaf';
// }
return item.$$isExpend ? 'fa fa-minus' : 'fa fa-plus';
};
$scope.isLeaf = function(item) {
return !item.children || !item.children.length;
};
$scope.warpCallback = function(callback, item, $event) {
($scope[callback] || angular.noop)({
$item: item,
$event: $event
});
};
}]
};
}]);
</script>
</head>
<body>
<div ng-controller="DemoController as demo" class="container">
<div class="row">
<h2>Tree view</h2>
<tree-view tree-data="demo.tree" text-field="name" value-field='id' item-clicked="demo.itemClicked($item)" item-checked-changed="demo.itemCheckedChanged($item)" can-checked="false"></tree-view>
</div>
<div class="row">
<h2>Item selected</h2>
<pre>{{demo.selectedItem | json}}</pre>
</div>
<script type="text/ng-template" id="/treeView.html">
<ul class="tree-view">
<li ng-repeat="item in treeData" ng-include="itemTemplateUrl || '/treeItem.html'"></li>
</ul>
</script>
<script type="text/ng-template" id="/treeItem.html">
<i ng-click="itemExpended(item, $event);" class="{{getItemIcon(item)}}">click</i>
<input type="checkbox" ng-model="item.$$isChecked" class="check-box" ng-if="canChecked" ng-change="warpCallback('itemCheckedChanged', item, $event)">
<span class='text-field' ng-click="warpCallback('itemClicked', item, $event);">{{item[textField]}}</span>
<ul ng-if="!isLeaf(item)" ng-show="item.$$isExpend">
<li ng-repeat="item in item.children" ng-include="itemTemplateUrl || '/treeItem.html'">
</li>
</ul>
</script>
</div>
</body>
</html>
以上是脚本宝典为你收集整理的angular三级联动组件编写，树形组件全部内容，希望文章能够帮你解决angular三级联动组件编写，树形组件所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。