Question

目前，尝试以Angular2样式编写代码，即不使用控制器。面对来自外部和内部指令的数据传输问题。怎么做正确？主要问题是如何在指令内部访问外部作用域并使用内部指令模板中的数据？例 on codepen

<test-directive>
  <nested/>
</test-directive>

Answer 1

您需要明确传递值

<test-directive>
  <nested [someInput]="somePropertyOnParent"></nested>
</test-directive>

@Component({
  selector: 'nested',
  template: `<ng-content></ng-content>`)}
class Nested {
  @Input() someInput;

  ngOnInit() {
    console.log(this.someInput);
  }
}

Answer 2

我简化了您的codepen，请参阅我修改后的version。

class Nested {
  restrict='E';  
  template='<p>Nested {{inner.outer}} {{inner.last}}</p>';
  controller=function(){
    this.last='Pupkin';
  };
  controllerAs='inner';
  bindToController={
    outer: '=' // a communicating point of outer and inner directives
  };
}

重点是，在bindToController中，您可以在此处添加端点变量outer。在外部模板中，为其指定一个值：<nested outer="outer.first"/>。

@GünterZöchbauer的答案是Angular 2。

此外，如果您想查看使用Angualr 1的组件样式的完整示例，您可以看到我的express-angular-es6-starter，带有ES6的A todo mvc和组件样式Angular 1代码。

Angularjs。嵌套指令

2 个答案: