argularjs双向数据绑定以及angularjs与mvc

本文介绍了AngularJS框架中的数据绑定机制,包括双向数据绑定的实现原理及其核心指令ng-model和ng-bind的用法。此外,还详细讲解了控制器的概念及如何使用ng-controller指令实例化控制器。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

数据绑定是angularjs框架在视图与作用域之间建立的数据同步机制。所谓双向是指界面的操作能够实时同步到作用域中,作用域中的数据修改也能够实时回显到界面中。

ng-model指令

ng-model指令可以建立数据绑定,

<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>model</title>
<script src="e:/angular-1.5.9/angular.js">
</script>
</head>
<body >
<div>用户名:<input type="text" ng-model="uname"/></div>
<div>{{uname}}</div>
</body>
</html>

ng-app用于启动angularjs应用,这时会创建一个名为$rootSocpe的作用域,该作用域为angularjs应用的根作用域

把ng-model指令作为属性添加到input标签中,此时angularjs会在$rootSocpe作用域中添加一个uname属性和input输入框绑定,在input输入内容时,angularjs会自动把输入的内容同步到作用域的uname属性中

{{uname}}为angularjs的表达式形式,可以访问angularjs作用域里的属性。同时angularjs还能够监视作用域中数据的变化,当数据发生变化时,页面显示内容也能够得到实时更新

ng-bind指令

ng-bind指令是和数据绑定相关的另一个指令,作用是实现作用域到视图的单项数据绑定,和表达式功能类似,可用于向界面中输出作用域中的数据如上面的

<div>{{uname}}</div>

可以替换为<div ng-bind="uname"></div>

或者

<div class="ng-bind:uname"></div>

在使用angularjs表达式的{{uname}}时如果遇到网络问题会导致angularjs加载缓慢,会看到游览器直接把angularjs表达式当作字符串渲染到页面中,用户体验不好,所以尽量使用ng-bind指令,他在angularjs没加载完毕的时候不会执行

angularjs中的mvc

angularjs中的mvc分别指模型,视图和控制器。其中angularjs内置的ng-controller指令可以对控制器对象实例化,作为标签的扩展属性使用

<div ng-controller="LoginController">

</div>

AngularJS框架遇到ng-controller指令时会根据ng-controller指令指定的控制器名称查找控制器构造方法,然后使用对应的构造方法实例化控制器对象,并将控制其依赖的对象注入控制器对象中。

在使用ng-controller指令实例化控制器时会产生一个新的作用域对象 同一个页面中可以使用多个ng-controller指令来实例化不同的控制器对象。但需要注意的是,每个控制器对应的作用域对象只能与ng-controller指令所在标签的开始标签与结束标签之间的DOM元素建立数据绑定。下面我编写了一个例子

<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>controller</title>
<script src="e:/angular-1.5.9/angular.js"></script>
</head>
<body>
<div ng-controller="UserController" style="border:#CCC solid lpx;">
用户名:<input type="text" ng-model="name" placeholder="用户名"/>
密码:<input type="password" ng-model="pword" placeholder="密码"/>
<button>提交</button>
<p>你输入的用户名:{{name}}</p>
<p>你输入的密码:{{pword}}</p>
</div>
<br/>
<div ng-controller="InfoContoller" style="border:#ccc solid lpx;">
个人爱好:<input type="text" ng-model="love" placeholder="个人爱好"/>
<p>你的个人爱好:{{love}}</p>
</div>
<script>
function UserController($scope,$log){
$scope.name="admin";
$scope.pword="123456"
$log.info("UserController->name:"+$scope.name);
$log.info("UserController->pword:"+$scope.pword);
}
function InfoContoller($scope,$log){
$scope.love="足球";
$log.info("InfoContoller->name:"+$scope.name);
$log.info("InfoContoller->pword:"+$scope.pword);
$log.info("InfoContoller->love:"+$scope.love);
}
var app=angular.module("app",[])
app.controller("UserController",UserController);
app.controller("InfoContoller",InfoContoller);
</script>
</body>
</body>
</html>

打开开发人员工具

本案例中,使用ng-controller指令实例化了两个控制器UserController和InfoContoller,AngularJS框架自动为每个控制器实例创建一个作用域对象,但是每个作用域对象只能与ng-controller所在的开始标签和结束标签之间DOM元素进行数据绑定,通过$log日至服务分别在usercontroller和infocontoller中输出$scope作用域对象的属性。由于用户名和密码输入框只能和usercontroller中的作用域对象进行数据绑定,因此在infocontoller控制器中输出作用域对象的name和pword

属性时输出对象为undefined

AngularJS应用中的DOM事件处理可以在控制器中完成,AngularJS框架为我们提供了一系列的事件绑定指令,这些指令是在原生的JavaScript事件名称前增加ng-前缀

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值