javascript - 为什么这在 AngularJS 中不起作用

Question

我的 HTML 是这样的

<div ng-controller = "AppControl">
   <input type="text" id="nameText" ng-model="yourName" value="{{name}}">
   <h1>You are typing : {{yourName}}</h1>
</div>

JavaScript 就在这里

var Application = {};
var App = angular.module('Application', []);
function AppControl($scope){
  $scope.name = "Name";
}

我的预期结果是：“名称”应该出现在文本框中，因为它是通过分配的$scope。由于文本框是model，所以<h1>标签应该用初始值更新，并且每当我更新它时都应该改变。但是当我更新它时，它正在更新值，但初始值没有出现在文本框中。

Answer 1

删除value="{{name}}"并分配给您的模型（例如$scope.yourName= "Name";）。Angular 将处理剩下的事情。

<div ng-controller="AppControl">
   <input type="text" id="nameText" ng-model="yourName">
   <h1>You are typing : {{yourName}}</h1>
</div>

var Application = {};
var App = angular.module('Application', []);
function AppControl($scope){
  $scope.yourName = "Name";
}

演示：http: //jsbin.com/efadal/1/