Question

Angular 1.X中的指令默认设置为双向绑定。默认情况下，组件具有隔离范围。我的观点看起来像：

<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，这将使您的组件可以访问指令的控制器。您可以在此处找到上述方法和其他方法：https://docs.angularjs.org/guide/component。

Answer 2

我必须明确说明我想绑定的变量：

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

此外，由于controllerVariable是一个字符串，我必须使用@符号绑定。

AngularJS 1.5 - 如何在组件上设置双向绑定

2 个答案: