AngularJS关于编译器的文档是有误导性的

Question

在AngularJS文档中是这样写的:

Compiler是一个遍历DOM的Angular服务查找属性。编译过程分为两个阶段。

Compile:遍历DOM并收集所有的指令。的结果是一个链接函数。

Link:将指令与作用域结合起来，生成实时视图。范围模型中的更改会反映在视图中，并且任何用户与视图的交互反映在作用域模型中。这使作用域模型成为唯一的真值来源。

在我看来，我用粗体突出的部分有一点误导。似乎不是这样，但这完全取决于指令的实现。

考虑下面的例子

angular.module('app', []);
var app = angular.module('app');
app.controller('MyCtrl', function ($scope) {
  $scope.hi = 'Hello World';
  $scope.log = function() {
    console.log($scope.hi);
  }
});
app.directive('myDir', function() {
    return {
    restrict: 'E',
    template: '<input value="{{hi}}" />',
    link: function($scope) {
        $scope.$watch('hi', function(newVal, oldVal) { 
        if(newVal === oldVal) return;
        console.log('value changed'); 
    });
    }
  }
});

with this view

<div ng-app="app">
  <div ng-controller="MyCtrl">
      <my-dir></my-dir>
      <button ng-click='log()'>log scope</button>
  </div>
</div>

输入元素中的更改不会传播到作用域(我完全了解指令ng-model，并且使用{{}}我只是单向插入表达式，但我所争论的正是这样:文档不清楚，因为我引用的部分完全依赖于指令的实现)。

我怀疑我错过了什么，所以我的问题是:我错过/误解了什么?

Answer 1

请参阅我更新的JSFiddle示例。

我已经添加了一个新的按钮:

<button ng-click='changeHiValue()'>Change Hi value from the controller</button>

和控制器中的新功能:

app.controller('MyCtrl', function($scope) {
  $scope.hi = 'Hello World';
  $scope.log = function() {
    console.log($scope.hi);
  }
  var index = 0;
  $scope.changeHiValue = function() {
    index = index + 1;
    $scope.hi = index;
  }
});

当用户点击按钮时，index变量增加1并重新赋值给$scope.hi。所以，每次你点击按钮"从控制器更改Hi值"，你会看到文本输入中的值被更新，如果你点击"日志范围"，<input>字段中的最后一个值被打印出来。

所以，文档中高亮显示的句子是正确的。如你所见

因此，例如，如果您点击3次按钮"从控制器更改Hi值"，您将看到<input>字段内的数字"3"，如果您点击"日志范围"，则打印数字"3";但是如果你用"foo"之类的东西改变输入字段中的文本，然后再次点击"log scope"，你会看到打印的是"3"而不是"foo"。这是正确的，因为在myDir模板中，您没有在input字段中绑定变量$scope.hi。要做到这一点，你应该使用ng-model而不是value属性。