数据绑定在带有输入标签的 AngularJS 中不起作用

Data binding not working in AngularJS with input tag

本文关键字：AngularJS 不起作用 标签 输入 数据绑定      更新时间：2023-09-26

下面是我的angularjs代码，当我尝试在文本框中输入任何文本时，它不会出现在绑定中。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="js/angular.js"></script>
    <script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('cont', ['$scope', function($scope) {
    }]);
    </script>
</head>
<body ng-app="myApp">
    <input type="text" ng-bind="user"></input>
    <p>{{user}}</p>
</body>
</html>

您需要使用 ng-model 指令进行 2 向绑定。 ng-bind只是单向的，当摘要周期发生时，它用数据（模型值）更新绑定元素。更新文本框时，如果没有 ng-model，则不会有任何摘要周期。Angular 对input和其他表单控件等类型具有指令定义，这些类型需要可选的ng-model指令。这些元素指令只有在目标元素上获得可选的 ng-model 控制器时才注册 change/input 等事件。当你拥有它们时，它使用 ng-model 控制器来设置视图值、模型值，并在该事件发生时触发摘要循环。当然，对于新的角度版本，您可以在元素级别或全局级别设置一个ng-model-options，以指定您希望何时进行模型值更新（和表单验证）。

所以做：-

<input type="text" ng-model="user" name="user"></input>
<p>{{user}}</p>

虽然在您的情况下不是问题，但您缺少ng-controller="cont"的使用。如果没有它，所有属性都将附加到您的 rootScope。所以可能是：

<body ng-app="myApp">
  <div ng-controller="cont">
    <input type="text" ng-model="user" name="user"></input>
    <p>{{user}}</p>
  </div>
</body>
相关文章：