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

Posted 2023-03-13

【中文标题】AngularJS 1.5 - 如何在组件上设置两种方式绑定

【英文标题】：AngularJS 1.5 - How to Set Two Way Bindings on Component

【发布时间】：2017-03-26 03:49:46

【问题描述】：

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>

但这也不显示值。

我在这里错过了什么？

【问题讨论】：

不推荐在组件中使用双向绑定。组件被设计成一个紧凑的、可重用的元素，完全独立，这意味着它不依赖于周围的 html/javascript，也不会导致周围的 HTML/JavaScript 发生变化。组件可以 与其他应用元素通信，但它们不应该能够修改或被其他元素修改。

【参考方案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。

【讨论】：

我在控制台中得到一个undefined

passedVar 在我看来应该是 passed-var

是的，感谢您对此的跟进，您还需要根据您定义控制器的方式适当地绑定 ctrl.passedVar（您可能只需要删除 ctrl. 并使用 passVar）

【参考方案2】：

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

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

另外，由于controllerVariable 是一个字符串，我不得不使用@ 符号绑定。