AngularJS 1.5 - 如何在组件上设置两种方式绑定(bind)

Question

Angular 1.X 中的指令默认设置为双向绑定(bind)。默认情况下，组件具有隔离的范围。我有一个看起来像这样的 View :

<div class="my-view">
    {{controllerVariable}}
</div>

如果我将上述内容设置为指令，则 controllerVariable 在以下情况下会正确加载:

<div ng-controller="myController">
    <my-view></my-view>
</div>

但是如果我使用以下命令将其设置为组件:

myApp.component('myView', {
    templateUrl: '/path/to/view',
    bindings: '='
});

则不显示变量值。我尝试将 $ctrl 添加到变量中:

<div class="my-view">
    {{$ctrl.controllerVariable}}
</div>

但这也不显示该值。

我在这里缺少什么？

Answer 1

您需要将指令中的值传递到组件中:

<my-view passed-var='ctrl.passedVar'></my-view>

在组件中:

myApp.component('myView', {
    templateUrl: '/path/to/view',
    bindings: {
        passedVar: '='
    },
    controller: function () {
      var vm = this;
      console.log(vm.passedVar);
    }
});

然后您将能够像示例中那样在组件中访问

还有一些其他方法可以做到这一点，例如使用服务来处理信息或使用 require 来让您的组件访问指令的 Controller 。您可以在这里找到上述方法和其他方法:https://docs.angularjs.org/guide/component 。