AngularJS指令隔离范围和父范围
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJS指令隔离范围和父范围相关的知识,希望对你有一定的参考价值。
我正在尝试实现一个递归指令,它似乎让它很好地工作我需要定义一个隔离范围以及访问父范围。基本上我希望我的指令能够访问在指令本身上设置为属性的变量,但我也希望能够访问控制器范围中设置的变量和方法。有没有办法将两者结合起来?我试过转换,但我想我不完全确定我是否正确使用它。这是我的问题的一个小例子,我希望指令中的每个'孩子'能够调用函数sayHi()
:http://jsfiddle.net/n8dPm/655/
答案
您必须将sayHi函数传递给您的指令。指令创建自己的范围,所以sayHi函数不是你的指令范围的一部分,允许它的方式是通过创建一个新的prop传递它。
<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);
});
};
}
};
});
以上是关于AngularJS指令隔离范围和父范围的主要内容,如果未能解决你的问题,请参考以下文章