angular 常见数据绑定的三种方式
发布时间：2020-12-17 08:45:30 所属栏目：安全 来源：网络整理
导读：一、ng-bind数据绑定，只能用于绑定单个数据 语法: ng-bind="数据" 数据绑定 二、ng-bind-template 可绑定多个数据 语法: ng-bind-template="{{ 数据1 }} {{ 数据2 }}" 绑定多个数据 三、ng-cloak 绑定的数据，有特殊处理，被绑定的标签在数据不存在的情况下
一、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> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |