14

我有一个简单的contactList组件，它有 2 个绑定：contacts和onRemove.

  • contacts只是要显示的联系人数组
  • onRemove是一个回调函数
app
  .component('contactList', {
    template: 
      `<div ng-repeat="c in $ctrl.contacts">
         {{c.name}}
         <div ng-click="$ctrl.onRemove({contact: c})">Remove</div>
       </div>`,
    bindings: {
      contacts: '<',
      onRemove: '&'
    },
    controller: function() {}
  })

我在我的应用程序中多次使用这个组件。并且onRemove回调的行为可能会有所不同，具体取决于使用组件的contactList位置。例子：

  • contactMainView(= 组件) 显示一个搜索栏和使用该contactList组件的联系人的结果列表。onRemove将从数据库中删除联系人。

  • groupMembersViewcontactList使用该组件显示属于给定组的所有联系人。此处不应删除联系人，但onRemove不会设置。

想法：

首先我想，我可以使用 anng-if="$ctrl.onRemove"但这不起作用，因为onRemove它永远不会undefined在contactList组件中。console.log(this.onRemove)总是打印：function(locals) { return parentGet(scope, locals); }

当然，我可以使用另一种showRemove: '@'绑定，但这对我来说并不干燥。

您有什么想法或更好的解决方案来完成工作吗？

4

3 回答 3

22

最简单的方法是检查属性是否已定义。在您的控制器中注入$attrs，然后您可以执行以下操作：

if( $attrs.onRemove ) { //Do something }

使用&绑定角度将包装函数以保持对$scope传递方法的原始引用，即使未定义也是如此。

于 2016-08-12T09:47:31.457 回答
0

对组件执行 onRemove 函数允许获取函数是否传入参数。所以你可以使用 ng-if="$ctrl.onRemove()"

component('contactList', {
template: 
  `<div ng-repeat="c in $ctrl.contacts">
     {{c.name}}
     <div ng-click="$ctrl.onRemove()({contact: c})" ng-if="$ctrl.onRemove()">Remove</div>
   </div>`,
bindings: {
  contacts: '<',
  onRemove: '&'
},
controller: function() {
  console.log(this.onRemove);
  console.log(this.onRemove());
}
})
于 2016-08-12T09:55:19.700 回答
0

另一种选择是通过在绑定定义中添加问号来将回调定义为可选： onRemove: '&?'

文档中的文本：所有 4 种绑定（@、=、< 和 &）都可以通过添加 ? 到表达式。标记必须位于模式之后和属性名称之前。有关定义示例，请参阅 Invalid Isolate Scope Definition 错误。

于 2021-08-01T18:11:02.320 回答