javascript - AngularJS 数据绑定(bind)不起作用 - 在 Controller 范围内变量未显示输入的值

Question

我遇到了一种奇怪的情况，其中 $scope 变量绑定(bind)似乎没有按预期工作。

这是 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在 Controller 加载时初始化为0。

无论我在输入元素中输入什么内容，我总是在控制台中得到 0。

Answer 1

这种情况通常会发生，如果您将 HTML 封装在 ng-if、ng-switch ng-repeat .. 或其他内容中创建新子作用域的其他指令。看这个fiddle .

因此，最佳实践是将您的作用域包装在某种模型中，以利用典型继承并将数据正确绑定(bind)到 $scope。

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

See this for few minutes和 Read this以便完全理解。