在AngularJS中，如何判断一个属性是否提供给组件？答案

【问题标题】：In AngularJS, how to determine if an attribute is provided to a component?在AngularJS中，如何判断一个属性是否提供给组件？
【发布时间】：2017-05-26 19:16:53
【问题描述】：

我有一个 AngularJS 1.5 组件，它采用可选的回调函数作为属性绑定。我想确定是否包含该属性。

<silly-button></silly-button> <!-- Don't Click Me! -->
<silly-button on-silly-click="handleClick()"></silly-button> <!-- Click Me! -->

鉴于下面的简单示例，我该如何实现onClickIsNotProvided() 函数？

angular
  .module('example')
  .component('sillyButton')
  .bindings({
    onSillyClick: '&'
  })
  .controller(['$scope', ($scope) => {
    $scope.onClickIsNotProvided = () => {
      // this.onSillyClick is always defined, so return value is always false :(
      return !this.onSillyClick;
    };
  }])
  .template(`
    <button ng-click="$ctrl.onSillyClick()">
      <span ng-if="onClickIsNotProvided()">Don't</span>
      Click Me!
    </button>
  `);

【问题讨论】：

只需使用与标准 w3schools.com/jsref/event_onclick.asp 不同的属性名称吗？
我已将简化示例中的属性名称更改为 on-silly-click 以避免与标准属性混淆。
可能是这样的？ stackoverflow.com/a/33935950/445600
@starcorn 好主意！将其发布为答案，我会接受。
@PatrickMcElhaney 可选参数? 是角度绑定的标准。顺便说一句，我建议您还通过angular.isFunction 提供另一个检查，以确保已传递的参数确实是一个函数

标签： javascript angularjs angularjs-components

【解决方案1】：

您可以使用&? 与=?、@? 相同来标记该参数是否可选。

一些参考可以在here 中找到。虽然它没有专门讨论可选的函数绑定。

【讨论】：

谢谢。我发送了一个 PR 以在我希望在文档中找到它的地方提及该功能。 github.com/angular/angular.js/pull/16017

【解决方案2】：

我认为这是您必须添加的功能：

function onClickIsNotProvided(item) {

    var elementAttributeValue = item.attributes['on-silly-click'].value;
    if (!elementAttributeValue) {
        return true;
    }
    else {
        return false;
}

这将与控制器的其他角度进入相同的位置。

【讨论】：

在上面，您将传入您要检查的元素。