AngularJS 1.4双向绑定异常：输入框值变更但$scope未同步

这个问题我太熟悉了，是AngularJS原型继承机制导致的经典坑！我来给你拆解一下原因和解决办法：

问题根源 #

当你在输入框使用ng-model="serviceTitle"时，如果这个输入框所在的DOM元素处于控制器作用域的子作用域中（比如被ng-if、ng-repeat、ng-switch这类会创建子作用域的指令包裹，甚至某些第三方组件也会隐式创建子作用域），子作用域会自动创建一个属于自己的serviceTitle变量副本——而不是直接修改控制器$scope（父作用域）里的原始变量。

这就导致了看似矛盾的现象：页面上的{{serviceTitle}}读取的是子作用域里的副本值，所以能同步显示输入框的修改；但控制器里的$scope.serviceTitle是父作用域的原始变量，自然还是初始值"Test"。

解决方案 #

这里有两种最常用且靠谱的解决方式：

1. 用对象包裹基本类型变量（官方推荐）

因为对象是引用类型，子作用域修改的是对象的属性，不会创建副本，父作用域的对象属性会同步更新。

修改后的控制器代码：

$scope.serviceData = {
  serviceTitle: "Test"
};

$scope.updateServiceIdentification = () => {
  // 现在能正确获取到输入框更新后的值了
  alert($scope.serviceData.serviceTitle);
};

修改后的HTML视图：

<div class="form-group">
  <label>Title</label>
  <input class="form-control" ng-model="serviceData.serviceTitle">
</div>
<div class="form-group">
  <button class="btn btn-primary" ng-click="updateServiceIdentification()">Update Service Identifcation</button>
</div>
<h1>{{serviceData.serviceTitle}}</h1>

2. 使用controllerAs语法（更现代的写法）

这种方式可以彻底避免直接依赖$scope，从根源上规避原型继承的问题，也是AngularJS后期推荐的写法。

修改后的控制器（假设控制器名为ServiceController）：

class ServiceController {
  serviceTitle: string = "Test";

  updateServiceIdentification = () => {
    alert(this.serviceTitle);
  };
}

// 记得在路由或指令配置中指定controllerAs，比如路由里：
// .state('service', {
//   controller: ServiceController,
//   controllerAs: 'vm',
//   templateUrl: 'service.html'
// })

修改后的HTML视图：

<div class="form-group">
  <label>Title</label>
  <input class="form-control" ng-model="vm.serviceTitle">
</div>
<div class="form-group">
  <button class="btn btn-primary" ng-click="vm.updateServiceIdentification()">Update Service Identifcation</button>
</div>
<h1>{{vm.serviceTitle}}</h1>

验证建议 #

你可以先检查一下输入框所在的DOM是否被创建子作用域的指令包裹——比如看看有没有ng-if、ng-repeat这类指令，这通常是触发这个问题的直接原因。不管哪种解决方案，都能帮你解决这个同步问题。

内容的提问来源于stack exchange，提问作者B岷眓g Rikimaru