Angular Component：如何为parent中定义的输出绑定函数指定值？

Question

我想使用 Angular 1.5's component to get benefit from its one-way binding: <hero-detail hero="ctrl.hero" save="ctrl.save(hero)"></hero-detail>. But, as Todd Motto points on his blog: Todd Motto's blog: One-way data-binding in Angular 1.5，它只适用于原语。所以我不得不绑定原语：

<hero-detail 
    name="ctrl.hero.name" 
    id="ctrl.hero.id"
    save="ctrl.save(ctrl.hero)"
  ></hero-detail>

接下来在组件中，在 $onInit 挂钩上，从基元创建 hero 对象：

HeroDetailController.prototype.$onInit = function(){
  this.hero = {
    name: this.name,
    id: this.id
  } 
  console.log('OnInit called');
}

并在用户点击保存时调用指定函数。奇怪的是，如果用户在组件内更改英雄名称并单击保存，当调用从父级绑定的函数时，它不会更改 hero-detail 组件。我做了一个 plunker，它显示了我的问题：Plunk which shows problem with children/parent output binding in Angular 1.5 - 如果你打开 Developer Console，点击 "Set name..." 然后点击保存，你会看到 console.logs，它会告诉你来自 [=17] =] 它是 Spawn2，但在父上下文中（应该是逻辑，比如与 $http 服务交谈），它仍然具有旧值 Spawn。我错过了什么吗？来自 Angular docs 的代码看起来很像我的代码：

<button ng-click="$ctrl.onDelete({hero: $ctrl.hero})">Delete</button>

我不知道发生了什么。预先感谢您帮助我处理这个问题。 P.S。我在使用 Plunk 版本时遇到了一些问题，现在一切正常 - 在浏览器的 Developer Console 中，您可以看到更新问题

Answer 1

为避免混淆变量的范围（父或子），在注入变量前加上$。

/* WAS
<hero-detail 
    name="ctrl.hero.name" 
    id="ctrl.hero.id"
    save="ctrl.save(ctrl.hero)"
 ></hero-detail>
 */

//SHOULD BE
<hero-detail 
    name="ctrl.hero.name" 
    id="ctrl.hero.id"
    save="ctrl.save($hero)"
></hero-detail>

然后在你的代码中：

HeroDetailController.prototype.saveHero = function(hero) {
    console.log('Hero name from child: ' + hero.name);
    this.save({
      $hero: hero
    });
};

这样你就可以知道表达式的哪些变量来自父作用域，哪些变量来自指令作用域。

Angular Component：如何为parent中定义的输出绑定函数指定值？

Angular Component: how to specified value for output binding function defined in parent?

javascript

angularjs

angularjs-directive

angularjs-controller

angularjs-components