数据绑定无法正常工作答案

【问题标题】：Data binding not working without function数据绑定无法正常工作
【发布时间】：2016-08-12 13:04:32
【问题描述】：

我有这个代码：

<!DOCTYPE html>
<html ng-app="m1">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller='c'>
      <input ng-model='x1'><br>
      <span>{{x2}}</span>
    </div>
  </body>
  <script>
    var m = angular.module("m1", []);
    m.controller('c', function($scope){
      $scope.x2 = $scope.x1;
    });
  </script>
</html>

当我在输入框中输入内容时，我没有看到它反映在 {{x2}} 输出中。

但是当我通过一个函数执行它时，它可以工作：

<!DOCTYPE html>
<html ng-app="m1">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller='c'>
      <input ng-model='x1'><br>
      <span>{{x2()}}</span>
    </div>
  </body>
  <script>
    var m = angular.module("m1", []);
    m.controller('c', function($scope){
      $scope.x2 = function(){
        return $scope.x1;
      }
    });
  </script>
</html>

为什么这在这种情况下不起作用？ x2 不应该在摘要周期内更新吗？

【问题讨论】：

x1 上的手表怎么样？类似于 $scope.$watch('x1', function(newVal, oldVal){ $scope.x2 = $scope.x1});

标签： javascript angularjs data-binding

【解决方案1】：

1。回答您的第一个问题：

当我在输入框中输入内容时，我没有看到它反映在 {{x2}} 输出中

这是因为 x1 或 x2 是纯文字，在 Javascript 中，文字不是通过引用传递的，但对象是。因此，如果您创建了一个对象来引用该值，它可能会起作用。例如：

var m = angular.module("m1", []);
m.controller('c', function($scope) {
  $scope.x1 = {myModel: ''};
  
  $scope.x2 = $scope.x1;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>

<div ng-app="m1" ng-controller='c'>
  <input ng-model="x1.myModel">
  <br>
  <span>{{x2.myModel}}</span>
</div>

上面的方法会起作用，因为x1 是一个对象，当你将它分配给x2 时，它的引用被传递，因此两者都是相同的。当您使用 x1 作为纯文字字符串时，情况并非如此。

当您使用angular.copy 克隆或复制对象时，上述内容将再次不起作用。查看相同的示例：

var m = angular.module("m1", []);
m.controller('c', function($scope) {
  $scope.x1 = {myModel: ''};
  
  $scope.x2 = angular.copy($scope.x1);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>

<div ng-app="m1" ng-controller='c'>
  <input ng-model="x1.myModel">
  <br>
  <span>{{x2.myModel}}</span>
</div>

这是因为现在您实际上并没有通过引用传递，而是实际上是在克隆对象。现在这与您的第一个问题相同。您只是在初始化控制器时将值从 x1 复制到 x2，而不是在修改 x1 中的值时。

2。回答你的第二个问题：

但是当我通过一个函数来做的时候，它可以工作

当你使用函数时，它起作用了，因为它是 Angular 的一个特性，当你在 Angular 中编写一个作用域函数并在你的视图中使用它时，比如{{x2()}}，那么 Angular 会在返回时自动更新视图函数的值（在这种情况下为x2()）已更改/更新。

3。解决方案

其他人已经提到过这个问题有多种解决方案。

3.1 使用`$watch`

(https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch)

var m = angular.module("m1", []);
m.controller("c", function($scope) {
  $scope.$watch("x1", function(newValue) {
    $scope.x2 = $scope.x1;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>

<div ng-app="m1" ng-controller='c'>
  <input ng-model="x1">
  <br>
  <span>{{x2}}</span>
</div>

3.2 使用`ng-change`

(https://docs.angularjs.org/api/ng/directive/ngChange)

var m = angular.module("m1", []);
m.controller("c", function($scope) {
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>

<div ng-app="m1" ng-controller='c'>
  <input ng-model="x1" ng-change="x2 = x1">
  <br>
  <span>{{x2}}</span>
</div>

这样，你就不需要任何Javascript代码了。

3.3 使用对象

使用 object 而不是我上面提到的纯字符串文字来避免这个问题。

3.4 使用函数

像您在问题中提到的那样使用 Angular 的功能特性。

【讨论】：

【解决方案2】：

你也可以使用观察者：

var m = angular.module("m1", []);
m.controller('c', function($scope){        
  $scope.$watch(function() { return $scope.x1; },
      function(newValue, oldValue) {
        $scope.x2 = $scope.x1
      }
    );
});

这样x2会和x1同时更新。

【讨论】：

【解决方案3】：

因为一旦你的控制器被定义，x1 只分配给x2 一次。为了看到x2 更新，您需要将ng-change 指令添加到input，这将触发将x1 分配给x2 的函数：

<body>
    <div ng-controller='c'>
        <input ng-change="changed()" ng-model='x1'><br>
        <span>{{x2}}</span>
    </div>
</body>
<script>
    var m = angular.module("m1", []);
    m.controller('c', function($scope){
        $scope.changed = function() {
            $scope.x2 = $scope.x1
        }
    });
</script>

示例：https://plnkr.co/edit/yl6eiLrDeIhMiQtJxPlz?p=preview

【讨论】：

1。回答您的第一个问题：

2。回答你的第二个问题：

3。解决方案

3.1 使用$watch

3.2 使用ng-change

3.3 使用对象

3.4 使用函数

3.1 使用`$watch`

3.2 使用`ng-change`