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

发布时间：2020-12-17 06:53:34 所属栏目：安全来源：网络整理

导读：Angular 1.X中的指令默认设置为双向绑定.默认情况下,组件具有隔离范围.我有一个看起来像这样的观点： div class="my-view" {{controllerVariable}}/div 如果我将上面的设置作为指令,则controllerVariable在以下情况下正确加载： div ng-controller="myContro

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>

但是这也没有显示出值.

我在这里错过了什么？

解决方法

您需要将指令中的值传递给组件：

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

在组件中：

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!