使用组件控制器内的绑定

Question

我已经构建了自己的角度组件，可以通过使用它的单个html-tag在我的代码中实现。所以我有这样的事情：

模板：

<div class="myComponent">
    <div ng-transclude></div>
    <span>{{ currentValue }}</span>
</div>

正如你所看到的，我得到了一个跨度，显示了我的控制器绑定的值。

在我的控制器中，我实现了这样的绑定：

static componentOptions = {
    transclude: true,
    bindings: {
        currentValue: "="
    }
}

我可以在我的web应用程序中实现我的组件，并为绑定赋予这样的值：

<my-component current-value="myVariable">
    <input ng-model="myVariable">
</my-component>

比我从绑定中获得结果（例如文本“hello world”）。现在我想更改绑定所在的控制器中的值。并且由于我的绑定中的"="，它被监视并在我的控制器中更改它，并且它通过绑定来自它的父节点。我试过这样（在我的组件控制器中）：

this.currentValue = "hello universe";

它不起作用，因为它是一个未知变量。如何在组件的控制器中使用绑定并覆盖它等？在我的组件模板中，当我使用绑定名称时，我没有问题来访问变量。

重要编辑：我试图向您展示图片会发生什么......

Step1：在这里你可以看到一个输入，其中定义了myVariable，右边是输入组件的插件，我尝试用双向绑定来改变myVariable ..

步骤2：现在我在输入中写入并覆盖myVariable - 它以两种方式监视它并更改它们（myVariable和组件中的绑定）：

步骤3：现在我更改了组件控制器中的绑定 - 它仅在不在输入中的组件中更改它，但我使用双向绑定（由于'='）：

第4步：当我再次更改输入中的myVariable时，它会再次更改（单向绑定，但为什么）？：

我希望它足够清楚。

谢谢和欢呼。

Answer 1

在AngularJS 1.5中，您的控制器实例将在相应的模板中以$ ctrl的形式提供。尝试

{{$ctrl.currentValue}}

代替。此外，如果您使用双向绑定（由于'='）myVariable

<my-component current-value="myVariable">

必须在父范围上定义

。也许试试

<my-component current-value="'myVariable'">

最初只是为了看它有效..