angular 常见数据绑定的三种方式

前端之家收集整理的这篇文章主要介绍了angular 常见数据绑定的三种方式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、ng-bind数据绑定,只能用于绑定单个数据

语法: ng-bind="数据"  数据绑定

二、ng-bind-template 可绑定多个数据

语法: ng-bind-template="{{ 数据1 }} {{ 数据2 }}"  绑定多个数据

三、ng-cloak 绑定的数据,有特殊处理,被绑定的标签在数据不存在的情况下,此数据绑定的标签会先被隐藏,等到数据传送到页面时才会显示标签和数据;

作用:常用于解决页面加载或刷新时,数据呈现 "{{ msg }}"这样的空数据,提升客户体验; 原理:显示隐藏无非是通过css 的display:none | block;切换来实现

语法:<标签 ng-cloak>{{ 数据1 }}</>

四、ng-no-bindable --不绑定 那么angularjs就不会解析这个元素内部(也包括元素自身上的angularjs代码)的代码

实例:
       <div ng-non-bindable ng-init="msg='1222'">{{msg}}</div>
       //结果:原样输出"{{msg}}"

示例代码:

<body ng-app="myApp" ng-controller="demoCtrl">
	<!-- {{ msg }} -->
	<!--
		1.ng-bind="数据"  数据绑定

		2.ng-bind-template="{{数据1}} {{数据2}}"  绑定多个数据

    3.ng-cloak 数据未解析会隐藏整个标签,防止空白{{msg}}情况; 
    当angularjs解析完数据以后 会移除ng-cloak指令。
	-->
  
  <div ng-bind="msg"></div>
	<div ng-bind-template="{{msg1}} {{msg2}}"></div>
  <div ng-cloak>{{msg2}}</div>

	<script src="node_modules/angular/angular.js"></script>
	<script>
		angular.module('myApp',[])

			.controller('demoCtrl',['$scope',function($scope){
        $scope.msg = "我是msg,亲爱的";
				$scope.msg1 = "我是msg1";
				$scope.msg2 = "我是msg2";

			}])
	</script>
</body>
</html>

猜你在找的Angularjs相关文章