[英]AngularJS directive isolate scope and parent scope
我试图实现递归指令,它似乎想获得它很好地工作,我需要定义一个分离的范围以及访问父范围。 基本上,我想我的指令来访问设置为在指令本身的属性变量,但我也希望能够访问控制器的范围设置变量和方法。 有没有办法将两者结合起来? 我已经尝试了transclude,但是我想我不确定我是否正确使用了它。 这是我的问题的一个小例子,我希望指令中的每个“孩子”都能够调用函数sayHi()
: http : //jsfiddle.net/n8dPm/655/
您必须将sayHi函数传递给您的指令。 指令创建自己的作用域,所以sayHi函数不是您的指令作用域的一部分,允许它的方法是通过创建一个新的prop传递它。
HTML
<div ng-app="myapp">
<div ng-controller="TreeCtrl">
<tree family="treeFamily"
say-hi="sayHi(name)"
ngTransclude></tree>
</div>
</div>
JS
var module = angular.module('myapp', []);
module.controller("TreeCtrl", function($scope) {
$scope.treeFamily = {
name : "Parent",
children: [{
name : "Child1",
children: [{
name : "Grandchild1",
children: []
},{
name : "Grandchild2",
children: []
}]
}, {
name: "Child2",
children: []
}]
};
$scope.sayHi = function(name){
alert(name+' says hello!')
}
});
module.directive("tree", function($compile) {
return {
restrict: "E",
scope: {
family: '=',
sayHi : '&'
},
transclude: true,
template:
'<p>{{ family.name }}</p>'+
'<ul>' +
'<li ng-repeat="child in family.children">' +
'<tree family="child" say-hi="sayHi(name)"></tree>' +
'<button ng-click="sayHi({name : child.name})">Say Hi</button>' +
'</li>' +
'</ul>',
compile: function(tElement, tAttr) {
var contents = tElement.contents().remove();
var compiledContents;
return function(scope, iElement, iAttr) {
if(!compiledContents) {
compiledContents = $compile(contents);
}
compiledContents(scope, function(clone, scope) {
iElement.append(clone);
});
};
}
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.