AngularJS数据绑定无效 - 在控制器内范围变量未显示输入的值

Question

我有一个奇怪的情况,其中$scope变量绑定似乎没有按预期工作.

这是HTML:

        <div class="input-group" style="width:100px">
            <input type="number" 
                   class="form-control" 
                   id="Sampling_Request_for_Current_Sampling_INPUT"
                   ng-model="aabbcc" 
                   style="width:125px;text-align:center">
            <span class="input-group-btn">
                <button class="btn btn-default" ng-disabled="Cannot_Allocate_Yet" ng-click="Get_Sampling_Request_Details()" type="button">{{All_Labels.Common.Display}}</button>
            </span>
        </div>

这是点击按钮时调用的范围函数:

$scope.Get_Sampling_Request_Details = function () {
    console.log("$scope.aabbcc: " + $scope.aabbcc) ;
}

变量$scope.aabbcc初始化为0控制器加载时.

无论我输入什么输入元素,我总是进入0控制台.

Answer 1

这种情况通常会发生,如果您已将HTML包装在内ng-if,ng-switch ng-repeat...或其他一些创建的指令new child scope.看到这个小提琴.

因此,将范围包装在某个模型中以利用原型继承并正确绑定数据是最佳实践$scope.

喜欢:$scope.data.aabbcc = 0并使用它ng-model ='data.aabbcc'.

请看几分钟,阅读本文以便完全理解.