Angular:函数调用作为指令的属性值

Angular: function call as attribute value for directive

提问人:MarcoS 提问时间:7/18/2016 最后编辑:MarcoS 更新时间:7/18/2016 访问量:2453

问:

这是对我的指令的减少:

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-ifng-ifattrs.itemname()

相反,我得到的是错误:

TypeError: attrs.itemname is not a function

你能给我一些指示吗?正如你所看到的,我很困惑,有角度的指令...... :-(

JavaScript angularjs 使用指令

评论

0赞 MSH 7/18/2016
您是否关闭了指令 </my-directive>并尝试 scope.itemname = attrs.itemname;
0赞 Zargold 7/18/2016
这是什么功能?从未见过它被定义...此外,如果它被定义为函数,则转换为 JSON 对象。所以你必须使用 angular.fromJson(attrs.itemname)attrs.itemname()
0赞 MarcoS 7/18/2016
@MandeepSingh:首先建议:谢谢,刚刚纠正了我的回答;第二个建议:这样,在生成的形式中,我得到字符串:,这不是我所期望的...... :-(itemname
0赞 MarcoS 7/18/2016
@Zargold:包含一个字符串(),这是一个$scope函数名称...attrs.itemnameitemNameBuildFunction
0赞 MarcoS 7/18/2016
@MandeepSingh:不,不是:我得到的是函数名称,而不是计算的函数结果...... :-(

答:

2赞 RIYAJ KHAN 7/18/2016 #1

你不需要这个语句。attrs.itemname()

在指令中传递的函数引用绑定到作为函数中的第一个参数传递的变量,该变量itemnamescopelinkisolated 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

评论

0赞 RIYAJ KHAN 7/18/2016
@Zargold 怎么了?你能详细说明或修复它吗,什么是重复的
0赞 Zargold 7/18/2016
重复意味着:其他人比你早 2 分钟回答了完全相同的事情。错误的意思是:似乎提出问题的人确实有 itemname 的函数,但他没有在正确的位置定义它,或者无法确定。
0赞 MarcoS 7/18/2016
scope.itemname()生产:TypeError: scope.itemname is not a function
0赞 RIYAJ KHAN 7/18/2016
男人第一件事,请检查正确的答案和我的一个。请检查您在那里找到的重复项。第二个不会计算表达式,这就是为什么使用孤立的范围。这就是为什么陈述这样的错误attrs.itemname
0赞 MarcoS 7/18/2016
我需要一个独立的范围。
0赞 Zargold 7/18/2016 #2

在我看来,您实际上想要将接受 javascript 对象并且(不需要 JSON.parse)允许您在您的范围内使用它们的类型。函数是 javascript 对象,可以使用 ();'='

因此,最好的解决方案是:这将允许您对项目名称进行回调,然后在您认为合适的范围内运行它。 scope: { action: '@', itemname: '=', },

https://plnkr.co/edit/cKzLhP4SwHey266Flr5w?p=preview

另外,有人将如何提交您提供的表格?如果您想提交隐藏的输入名称,您应该有一个似乎没有意义。此外,您可能希望使用 templateURL 并包含一个 HTML 模板,而不是在 js 中使用一个大的动态表单。<input type='submit'/>