4

我想使用Angular 1.5 的组件从它的单向绑定中获益：<hero-detail hero="ctrl.hero" save="ctrl.save(hero)"></hero-detail>. 但是，正如 Todd Motto 在他的博客中指出的那样：Todd Motto 的博客：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 显示 Angular 1.5 中子/父输出绑定的问题- 如果您打开开发者控制台，单击“设置名称...”，然后单击保存，您将看到console.logs 将显示您来自hero-detail它的是 Spawn2，但在父上下文中（应该是逻辑，比如与$http服务交谈），它仍然具有旧值Spawn。我错过了什么吗？Angular 文档中的代码看起来很像我的代码：

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

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

4

1 回答 1

4

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

/* 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
    });
};

通过这种方式，您可以知道表达式的哪些变量来自父作用域，哪些变量来自指令作用域。

于 2016-03-12T23:35:48.760 回答