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

最新推荐文章于 2024-08-14 11:52:37 发布

weixin_33709590

最新推荐文章于 2024-08-14 11:52:37 发布

阅读量977

点赞数

文章标签： javascript 数据库 python ViewUI

原文链接：https://my.oschina.net/shuaihong/blog/1542151

版权

2019独角兽企业重金招聘Python工程师标准>>>

一、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>

转载于:https://my.oschina.net/shuaihong/blog/1542151