AngularJS，如何判断某个属性是否提供给组件？

Question

我有一个 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>
  `);

Answer 1

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

function onClickIsNotProvided(item) {

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

这将与控制器的另一个 angular 进入相同的位置。

Answer 2

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

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

AngularJS，如何判断某个属性是否提供给组件？

In AngularJS, how to determine if an attribute is provided to a component?

javascript

angularjs

angularjs-components