我创建了一个简单的可重用集合容器作为具有隔离范围的指令,atransclude
选项设置为 true。
app.directive('itemWrapper', function() {
return {
template: '...',
replace: true,
transclude: true,
restrict: 'E',
scope: {
name: '=',
isExpanded: '='
}
};
});
和一个列表视图指令,我想从控制器传递一个函数来处理对列表项的点击
app.directive('listItem', function() {
return {
template: '...',
replace: true,
restrict: 'E',
scope: {
item: '=',
action: '&'
},
link: function(scope, elm, attrs){
scope.performAction = function(val){
action({'data': val});
};
}
};
});
我的 html 块看起来如下:
<collection-wrapper name='item.name' is-expanded='item.visible'>
<list-item item='item' action='log(data)'></list-item>
</collection-wrapper>
但是当我单击链接时,我得到一个参考错误,说action
没有定义。问题是,如何将一个函数从控制器传递给这个指令?据我了解,嵌入范围是孤立范围的孩子,这是我无法克服的障碍!
这是一个Plunkr。