Question

我有一个简单的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将从数据库中删除该联系人。
groupMembersView使用contactList组件显示属于给定组的所有联系人。 此处不应删除联系人，但不会设置onRemove。

思路：

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

当然我可以使用另一个showRemove: '@'绑定，但这对我来说看起来不是 DRY 。

你有任何想法或更好的解决方案来完成任务吗？

Answer 1

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

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

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

Answer 2

在组件上执行onRemove函数允许获取函数是否在参数中传递。所以你可以使用ng-if =＆＃34; $ ctrl.onRemove（）＆＃34;

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());
}
})

Answer 3

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

文档中的文本：All 4 kinds of bindings (@, =, <, and &) can be made optional by adding ? to the expression. The marker must come after the mode and before the attribute name. See the Invalid Isolate Scope Definition error for definition examples.

Angular 1.5组件绑定：检查回调是否存在

思路：

3 个答案: