javascript - 使用 ng-model 在 p 元素中显示输入值

Question

我正在使用名为slick的 slider 模块。我有一个选项卡标题，用于跟踪和显示幻灯片的索引，以便用户可以看到。问题是选项卡标题随着每张幻灯片一起滑动，因为该选项卡位于轮播内部(显然)。

我将选项卡标题移出幻灯片，并计划显示使用 ng-model 和 ng-value 将数据绑定(bind)到外部元素滑动。就像这样:

<div>
     <p>Blue Renewal {{vm.slide.number}} of {{$ctrl.blueRenewals.length}}</p>
</div>
<slick data="$ctrl.phaseArr" >
     <div ng-repeat="item in $ctrl.phaseArr">
        <div>
            <input type="text" ng-model="vm.slide.number" ng-value="{{$index + 1}}">
        </div>
    </div>
</slick>

在 .js 中:

vm.slide = {
    number: '1'
}

问题

为什么输入中的值没有绑定(bind)到光滑轮播之外的 p 元素？

Answer 1

很难说，代码这么少，但我怀疑您遇到了范围问题。

这里至少有两个，可能至少有三个级别的范围。您的标题位于 Controller 中，访问其范围的属性。因此，当您绑定(bind)到 vm.slide.number 时，它会查看您的范围。 “slick”组件可能会创建自己的作用域，这可能是 vm 的来源。如果是这种情况，您的 View (在 slick 范围的父级上)将看不到其属性。

(ngRepeat 还会创建子作用域，但我认为这不是问题。)