javascript - 数据绑定(bind)在带有输入标签的 AngularJS 中不起作用

标签 javascript angularjs angularjs-directive angularjs-scope

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

<!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双向绑定(bind)指令。 ng-bind只是一种在摘要循环发生时用数据(模型值)更新绑定(bind)元素的方法。没有 ng-model 更新文本框时不会有任何摘要循环。 Angular 有 directive definition for types like input和其他需要可选 ng-model 指令的表单控件。并且这些元素指令仅在 gets the optional ng-model controller 时才注册 change/input 等事件在目标元素上。当你拥有它们时,它使用 ng-model Controller 设置 View 值、模型值并在 that event occurs 时触发摘要周期。 .当然,对于新的 Angular 版本,有一个 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>

关于javascript - 数据绑定(bind)在带有输入标签的 AngularJS 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28326210/

相关文章:

javascript - Node.js 中的动态路由

javascript - WordPress 在每个帖子上运行 javascript 代码

AngularJS 指令 - 隔离范围特殊绑定(bind)字符

javascript - 如何修复 Angular Directive(指令)顺序(Firefox 和其他浏览器之间的区别)?

angularjs - 并排面板指令

php - AJAX 请求不起作用 (POST)

javascript - 范围图像 URL 未更新并显示在 View 中 (AngularJS)

javascript - 当 gulp 为应用程序提供服务时,如何在 webstorm 中调试 Javascript

javascript - AngularJS - 没有获得 Controller 或 View 的返回值

javascript - 防止输入任何附加字符