来自 AngularJS 组件的表面信息

Question

文档说

Outputs are realized with & bindings, which function as callbacks to component events

处理程序在包含我的组件的功能的控制器中定义。

$scope.handleStatusChange = function (sc) {
  console.log(sc);
}

它在标记中绑定到组件。

<search-context
  centre-code="4321"
  on-status-change="handleStatusChange">
</search-context>

当我在我的组件代码中调用处理程序时，处理程序被调用但参数未定义。我试过用各种方式表达参数都没有成功。

ctrl.onStatusChange(ctrl.status);
ctrl.onStatusChange({ value: ctrl.status });

如何传递参数？

处理程序是否需要签名？

Answer 1

文档中的这个示例暗示属性名称和参数名称之间存在匹配约定。

function HeroDetailController() {
  var ctrl = this;

  ctrl.delete = function() {
    ctrl.onDelete({hero: ctrl.hero});
  };

  ctrl.update = function(prop, value) {
    ctrl.onUpdate({hero: ctrl.hero, prop: prop, value: value});
  };
}

<hero-detail ng-repeat="hero in $ctrl.list" hero="hero" 
  on-delete="$ctrl.deleteHero(hero)" 
  on-update="$ctrl.updateHero(hero, prop, value)"></hero-detail>

重写，使标记绑定中的名称与调用回调时传递的对象中的属性名称匹配。

处理程序实现不需要匹配，只需组件代码和标记。

来自 AngularJS 组件的表面信息

Surfacing information from an AngularJS component

angularjs

angular-components