上一篇从整体上认识了棱角分明，从现在开始更加深入的学习有角的的特性。本次学习的是数据绑定。应该所有的手动音量调节框架都会用到数据绑定，比如我所知道的ThinkPHP、struts等，只有实现了数据绑定才能将模型层和视图层分离，实现MVC。有角的的数据绑定比较特别，它支持双向数据绑定。

1、非绑定

！DOCTYPE html html lang=' en ' ng-app=' myApp ' head meta charset=' UTF-8 ' title data binding 1/title/head dy h1 ng-controller=' dataCtrl ' ng-bind=' data '/h1脚本类型=' text/JavaScript ' src=' http :/node _ modules/angular/angular。量滴js /脚本脚本脚本类型=' text/JavaScript ' angular。模块(' myApp '，[]).控制器(“数据控制”，函数($scope){ $scope.data='你好啊！})/脚本/正文/htmlng-bind实现了一个简单单向绑定。

2、{{}}

类似ng绑定用的比较多。

！DOCTYPE html html lang=' en ' ng-app=' myApp ' head meta charset=' UTF-8 ' title data binding 1/title/head dy h1 ng-controller=' dataCtrl ' { data } }/h1脚本类型=' text/JavaScript ' src=' http :/node _ modules/angular/angular。量滴js /脚本脚本脚本类型=' text/JavaScript ' angular。模块(' myApp '，[]).控制器(“数据控制”，函数($scope){ $scope.data='你好啊！})/脚本/正文/html这种绑定的缺点是，开始加载时可能会出现类似{ {数据}}这样的东西。

解决方法是使用尼日利亚绑定或斗篷，斗篷应该只在有数据绑定的地方使用，否则处理中用户将看到空白。

！DOCTYPE html html lang=' en ' ng-app=' myApp ' head meta charset=' UTF-8 ' title data binding 2/title/head dy-ng斗篷h1 ng-controller=' dataCtrl ' { data } }/h1脚本类型=' text/JavaScript ' src=' http :/node _ modules/angular/angular。量滴js /脚本脚本脚本类型=' text/JavaScript ' angular。模块(' myApp '，[]).控制器(“数据控制”，函数($scope){ $scope.data='你好啊！})/脚本/正文/html我测试了一下ng-斗篷，不知道为什么不行，有人知道的话请告知一下。

3、ng绑定超文本标记语言

这个指令可以用超文本标记语言的方式处理数据，它不会将超文本标记语言代码解析成实体。下面对比一下尼日利亚绑定和绑定html .

！DOCTYPE html html lang=' en ' ng-app=' myApp ' head meta charset=' UTF-8 ' title data binding 3/title/head dy div ng-controller=' dataCtrl ' ng-bind=' data '/div script type=' text/JavaScript ' src=' http :/node _ modules/angular/angular。量滴js /脚本脚本脚本类型=' text/JavaScript ' angular。模块(' myApp '，[]).控制器(“数据控制”，函数($ scope){ $ scope。data=' h1 style=' color : red'你好啊/h1 '；})/脚本/正文/html

！DOCTYPE html html lang=' en ' ng-app=' myApp ' head meta charset=' UTF-8 ' title data binding 3/title/head dy div ng-controller=' dataCtrl ' ng-bind-html=' data '/div script type=' text/JavaScript ' src=' http :/node _ modules/angular/angular。量滴js /脚本脚本脚本类型=' text/JavaScript ' angular。模块(' myApp '，[]).控制器(“数据控制”，函数($ scope){ $ scope。data=' h1 style=' color : red'你好啊/h1 '；})/脚本/正文/html换成ng-绑定-html时出错了

这是因为有角的默认是不信任超文本标记语言的，所以要这样做。

！DOCTYPE html html lang=' en ' ng-app=' myApp ' head meta charset=' UTF-8 ' title data binding 3/title/head dy div ng-controller=' dataCtrl ' ng-bind-html=' data '/div script type=' text/JavaScript ' src=' http :/node _ modules/angular/angular。量滴js /脚本脚本脚本类型=' text/JavaScript ' angular。模块(' myApp '，[]).控制器(' dataCtrl '，函数($scope，$ SCE){ $ scope。数据=$ SCE。信任ashtml(' h1 style=' color : red；'你好啊/h1’)；})/脚本/正文/html这样就可以了。

4、ng-结合-模板

尼日利亚绑定只接受单个数据绑定表达式，而ng-绑定模板则相对灵活些。

！DOCTYPE html html lang=' en ' ng-app=' myApp ' head meta charset=' UTF-8 ' title data binding 3/title/head dy div ng-controller=' dataCtrl ' ng-bind-template=' { { data 1 } }爱{{data2}} ' /div脚本类型=' text/JavaScript ' src=' http :/node _ modules/angular/angular。量滴js /脚本脚本脚本类型=' text/JavaScript ' angular。模块(' myApp '，[]).控制器(“数据控制”，函数($scope，$sce){ $scope.data1='我；$scope.data2='中国；})/脚本/正文/html！-我爱中国- 5、ng-不可绑定

有时我们使用了{{}}但是我们并不是要绑定数据，直接用会出错，所以要像这样

！DOCTYPE html html lang=' en ' ng-app=' myApp ' head meta charset=' UTF-8 ' title data binding 1/title/head body h1 ng-controller=' dataCtrl ' ng-不可绑定尼日利亚中绑定数据的方法是{{data}} /h1脚本类型=' text/JavaScript ' src=' http :/node _ modules/angular/angular。量滴js /脚本脚本脚本类型=' text/JavaScript ' angular。模块(' myApp '，[]).控制器(“数据控制”，函数($scope){ //$scope.data='你好啊！})/脚本/正文/html6,双向数据绑定尼日利亚模型

双向数据绑定允许元素从用户处收集数据以改变程序状态。

！DOCTYPE html html lang=' en ' ng-app=' myApp ' head meta charset=' UTF-8 ' title data binding 5/title/head dy div ng-controller=' dataCtrl ' h1 { { data } }/h1输入类型=' text ' name=' data ' ng-model=' data '/div脚本类型=' text/JavaScript ' src=' http 3360./node _ modules/angular/angular。量滴js /脚本脚本脚本类型=' text/JavaScript ' angular。模块(' myApp '，[]).控制器(“数据控制”，函数($scope){ $scope.data='你好啊！})/脚本/正文/html

你会发现文本框的内容和氕中的内容同步变化。

7、小结一下

与数据绑定的相关指令如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。