提问人:MarcoS 提问时间:7/18/2016 最后编辑:MarcoS 更新时间:7/18/2016 访问量:2453
Angular:函数调用作为指令的属性值
Angular: function call as attribute value for directive
问:
这是对我的指令的减少:
app.directive('myDirective', function() {
return {
restrict: 'E',
replace: true,
template:
'<form name="form" action="{{action}}" method="post">' +
'<input type="hidden" name="item_name" value="{{itemname}}">' +
'</form>',
scope: {
action: '@action',
itemname: '@itemname',
},
link: function(scope, element, attrs) {
scope.action = attrs.action || 'http://www.example.com';
scope.itemname = attrs.itemname();
}
};
});
我是这样使用它的:
<div ng-if="itemWasSelected">
<my-directive
action="{{ 'http://www.example.com' }}"
itemname="itemNameBuildFunction"
/>
</div>
在我的控制器中,我有:
$scope.itemNameBuildFunction = function() {
return $scope.value1 + $scope.value2;
};
我希望我的指令在链接时(它在子句中,所以,我的意思是,当条件计算结果为 true 时)调用$scope函数,在控制器的链接函数中分配 scope.itemname 变量。ng-if
ng-if
attrs.itemname()
相反,我得到的是错误:
TypeError: attrs.itemname is not a function
你能给我一些指示吗?正如你所看到的,我很困惑,有角度的指令...... :-(
答:
你不需要这个语句。attrs.itemname()
在指令中传递的函数引用绑定到作为函数中的第一个参数传递的变量,该变量itemname
scope
link
isolated scope
只需将语句从
scope.itemname = attrs.itemname();
自:
scope.itemname(); // this will call the function `itemNameBuildFunction`
编辑:
您已经使用了运算符ofr绑定函数,该函数用于传递原语或对象。你正在传递函数,所以,你应该使用运算符,将计算为函数。@
&
scope: {
action: '@action',
itemname: '&itemname',
}
编辑2:
你应该传递函数而不是itemNameBuildFunction()
itemNameBuildFunction
<my-directive action="{{ 'http://www.example.com' }}"
itemname="itemNameBuildFunction()" />
工作 Plunker
评论
scope.itemname()
生产:TypeError: scope.itemname is not a function
attrs.itemname
在我看来,您实际上想要将接受 javascript 对象并且(不需要 JSON.parse)允许您在您的范围内使用它们的类型。函数是 javascript 对象,可以使用 ();'='
因此,最好的解决方案是:这将允许您对项目名称进行回调,然后在您认为合适的范围内运行它。
scope: {
action: '@',
itemname: '=',
},
https://plnkr.co/edit/cKzLhP4SwHey266Flr5w?p=preview。
另外,有人将如何提交您提供的表格?如果您想提交隐藏的输入名称,您应该有一个似乎没有意义。此外,您可能希望使用 templateURL 并包含一个 HTML 模板,而不是在 js 中使用一个大的动态表单。<input type='submit'/>
评论
attrs.itemname()
itemname
attrs.itemname
itemNameBuildFunction