如何将函数从控制器 (angular 1.3) 传递到包含范围?
How to pass a function to transcluded scope from a controller (angular 1.3)?
我创建了一个简单的可重复使用的收集容器作为具有隔离范围的指令,transclude
选项设置为 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>
但是当我点击 link 时,我得到一个引用错误,说 action
没有定义。问题是,如何将一个函数从控制器传递给这个指令?据我了解,嵌入作用域是一个 child 的孤立作用域,这是我无法克服的障碍!
这是一个Plunkr。
根据您的说法,“从控制器传递功能意味着从控制器启动功能,或者您希望从嵌入的内容中触发功能??
action
是作用域上的方法。你需要说:
scope.action({'data': val});
我创建了一个简单的可重复使用的收集容器作为具有隔离范围的指令,transclude
选项设置为 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>
但是当我点击 link 时,我得到一个引用错误,说 action
没有定义。问题是,如何将一个函数从控制器传递给这个指令?据我了解,嵌入作用域是一个 child 的孤立作用域,这是我无法克服的障碍!
这是一个Plunkr。
根据您的说法,“从控制器传递功能意味着从控制器启动功能,或者您希望从嵌入的内容中触发功能??
action
是作用域上的方法。你需要说:
scope.action({'data': val});