[英]Angular Directive — Can't access child or grandchild nodes in a tree view
我有一個構建樹狀視圖的指令。 它基於http://jsfiddle.net/KNM4q/113/上的代碼示例。 我希望能夠單擊樹中的任何節點,並使單擊在控制器中執行處理該節點特定數據的方法。 雖然我已經在根節點和子節點中使用了代碼,但是我無法使其與孫子節點或偉大的Granchildren節點一起使用。
這是小矮人:
http://plnkr.co/edit/AKiD8ZyKK8dUSPEcWI3p?p=preview 。
這是HTML:
<div ng-controller="appCtrl">
<tree val="treeData" zo="itemDetail(param)" ></tree>
</div>
這是指令:
angular.module('components')
.directive('tree', function ($compile) {
return {
restrict: 'E',
terminal: true,
scope: { val: '=', parentData:'=', zo:'&' },
link: function (scope, element, attrs) {
var template = '<span>{{val.text}}</span><button ng-click="showDetail()" ng-show="val.text">Show Detail</button> ';
if (angular.isArray(scope.val.items)) {
template += '<ul class="indent"><li ng-repeat="item in val.items"><tree val="item" parent-data="val.items" zo=zo({param:item.text}) > </tree></li></ul>';
}
scope.showDetail = function(index) {
var param = 'aaa';
scope.zo();
};
var newElement = angular.element(template);
$compile(newElement)(scope);
element.replaceWith(newElement);
}
}
});
這是控制器:
function appCtrl($scope) {
var treeData = {
"text": "root",
"items": [{
"text": "Furniture",
"items": [{
"text": "Tables & Chairs"
}, {
"text": "Sofas",
"items": [{
"text": "Tables & Chairs"
}, {
"text": "Sofas"
}]
}, {
"text": "Occasional Furniture"
}]
}, {
"text": "Decor",
"items": [{
"text": "Bed Linen"
}, {
"text": "Curtains & Blinds"
}, {
"text": "Carpets"
}]
}]
};
//initial parameter that is sent
$scope.param = 'root';
$scope.treeData = treeData;
$scope.itemDetail = function (param){
alert('in controller ' + param);
}
}
您想將該函數作為對象引用傳遞,並使用=
not &
in指令范圍將它以2種方式綁定回每個父級。
HTML
<!-- notice removed "()" -->
<tree val="treeData" zo="itemDetail" ></tree>
JS
由於zo
已綁定到父作用域函數,因此可以在模板html中使用它
.directive('tree', function ($compile) {
return {
restrict: 'E',
terminal: true,
scope: { val: '=', parentData:'=', zo:'=' },
link: function (scope, element, attrs) {
var template = '<span>{{val.text}}</span><button ng-click="zo(val.text)" ng-show="val.text">Show Detail</button> ';
if (angular.isArray(scope.val.items)) {
template += '<ul class="indent"><li ng-repeat="item in val.items"><tree val="item" parent-data="val.items" zo="zo" > </tree></li></ul>';
}
var newElement = angular.element(template);
$compile(newElement)(scope);
element.replaceWith(newElement);
}
}
簡單來說,這與執行操作相同:
function foo( param ){
alert(param);
}
var bar = foo;
bar('someString') // alerts "someString"
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.