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

Question

AngularJS documentation 中写道：

编译器是一个遍历 DOM 的 Angular 服务 寻找属性。编译过程分两个阶段进行。

编译：遍历 DOM 并收集所有指令。这 result 是一个链接函数。

链接：将指令与范围组合并生成实时视图。 任何 范围模型中的更改会反映在视图中，并且任何用户 与视图的交互反映在范围模型中。这 使范围模型成为唯一的事实来源。

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

考虑this fiddle中的示例

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'); 
    });
    }
  }
});

用这个观点

<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

请看my updated JSFiddle example。

我添加了一个新按钮：

<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 属性。