Question

在AngularJS documentation中写道：

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

编译：遍历DOM并收集所有指令。该   结果是一个链接功能。

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

在我看来，我以粗体突出显示的部分有点误导。它似乎并非如此，但它完全取决于指令的实现。

考虑this fiddle

中的示例

$http.get('localhost:3000/contactlist')

有了这个观点

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

输入元素中的更改不会传播到范围（我完全了解指令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。因此，当您单击“从控制器更改值”按钮时，您会看到文本输入中的值已更新，如果单击“日志范围”，则会打印<input>字段中的最后一个值。

因此，文档中突出显示的句子是正确的。如你所见。

因此，例如，如果单击“从控制器更改值”按钮的3次，则会在<input>字段中看到数字“3”，如果单击“日志范围”，则会显示该数字打印“3”; 但如果您使用类似“foo”的内容更改输入字段内的文本并再次单击“log scope”，则会看到“3”打印而不是“foo”。这是正确的，因为在myDir模板中，您没有在$scope.hi字段中绑定变量input。为此，您应该使用ng-model而不是value属性。

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

1 个答案: