两种方式隔离绑定角度指令 es6答案

【问题标题】：Two way isolated binding angular directives es6两种方式隔离绑定角度指令 es6
【发布时间】：2016-07-01 04:49:08
【问题描述】：

我无法弄清楚隔离作用域的工作原理。当我评论指令的范围部分时，我的代码似乎工作正常。谁能解释我错过了什么？

  export function ExampleDirective() {
    'ngInject';

    let directive = {
      restrict: 'E',
      templateUrl: 'someurl.html',
      scope: {
          theFilter: '=' //isolated - if i make the scope global, it works
      },
      controller: ExampleController,
      controllerAs: 'vm',
      bindToController: true,
      link: linkFunc
    };

    function linkFunc(scope, el, attr, vm) {
    }

    return directive;
  }

  class SymptomSearchController {
    constructor ($scope) {
      'ngInject';
    }
  }

<input type="text"
       class="form-control"
       ng-model="theFilter">

<example-directive theFilter="main.theFilter"></example-directive>

export class MainController {  //as 'main'
  constructor() {
    'ngInject';
    this.theFilter = "test";
  }
}

【问题讨论】：

标签： javascript angularjs angularjs-directive ecmascript-6 angularjs-controlleras

【解决方案1】：

由于您的控制器内部指令有别名，因此您应该在访问控制器的变量之前使用它。在ng-model 值中添加vm.。

<input type="text"
       class="form-control"
       ng-model="vm.theFilter">

【讨论】：