用了angularJs的对这几个指令应该并不陌生,它们之前就什么区别,可能有些人对此用法比较模糊,下面我们来一一讲解下:
1.ng-bind
作用:告诉AngularJS用给定表达式的值替换指定HTML元素的文本内容,并在该表达式的值更改时更新文本内容
注意: ng-bind不能解析html元素,它只能解析普通字符串
<body ng-controller='MyCtrl'>
<div ng-bind="html"></div>
<div ng-bind="str"></div>
<script type="text/javascript">
var app = angular.module('app',[]);
app.controller('MyCtrl',['$scope',function ($scope) {
$scope.html = '<span>我是html元素</span>';
$scope.str="我是字符串";
}])
</script>
</body>
看下面执行结果:
当然,你I不用ng-bind你也可以直接用{{ }}表达式来写,但是这样会有个问题,angularJS还未编译时候,浏览器会将它未编译时的状态显示出来,那么你要用到ngCloak指令(它的原理是给元素加上了一个class让元素不显示,当angularJs解析到ngCloak指令时候会去掉class让元素显示)
<body ng-controller='MyCtrl'>
<div ng-cloak>
<div>{{html}}</div>
<div>{{str}}</div>
</div>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('MyCtrl', ['$scope', function ($scope) {
$scope.html = '<span>我是html元素</span>';
$scope.str = "我是字符串";
}])
</script>
</body>
这样写也可以,但是建议还用ng-bind来进行绑定
2.ng-init
作用:这个指令可以在模板中直接赋值,用于初始化数据,说得直白一点就是开始时赋值
注意:当需要多个变量定义时,必须用分号隔开,而不是用逗号,ngInit的唯一适当用法是为ngRepeat的特殊属性使用别名。除了这种情况,您应该使用控制器而不是ngInit来初始化作用域上的值。
<!DOCTYPE html>
<html lang="en" ng-app='app'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="angular.js"></script>
</head>
<body ng-controller='MyCtrl'>
<div ng-repeat='item in init' ng-init='itemIndex=$index'>
<div ng-repeat='value in item' ng-init='valueIndex=$index'>
<span>{{itemIndex}},{{valueIndex}}</span>
</div>
</div>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('MyCtrl', ['$scope', function ($scope) {
$scope.init = [
[1, 2, 3],
[4, 5, 6]
];
}])
</script>
</body>
</html>
我的嵌套ng-repeat循环需要第二个$ index。 我应该在哪里放?这时候可以使用ngInit为这些属性创建别名!下图是我为输出的两个$ index的值
3.ng-bind-html
作用:计算表达式并将生成的HTML以安全的方式插入到元素中
注意:与ng-bind的不用之处是可以插入html元素,并且要与安全的方式插入,安全插入的方式有两种,一种是$ sanitize服务,另外一种是$sce服务
一.$ sanitize服务(前提是引入angular-sanitize.js)
<!DOCTYPE html >
<html lang="en" ng-app='app'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="angular.js"></script>
<!-- <script src="angular-sanitize.js"></script> -->
</head>
<body ng-controller='MyCtrl'>
<div ng-bind-html="html"></div>
<div ng-bind="str"></div>
<script type="text/javascript">
var app = angular.module('app',[]);
app.controller('MyCtrl',['$scope',function ($scope) {
$scope.html = '<span>我是html元素</span>';
$scope.str="字符串";
}])
</script>
</body>
</html>
我把angular-sanitize.js注释了,所以会报错!如果你把angular-sanitize.js引进来,使用ngSanitize 模块依赖,默认情况下将使用$ sanitize服务对生成的HTML内容进行处理
<!DOCTYPE html >
<html lang="en" ng-app='app'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="angular.js"></script>
<script src="angular-sanitize.js"></script>
</head>
<body ng-controller='MyCtrl'>
<div ng-bind-html="html"></div>
<div ng-bind="str"></div>
<script type="text/javascript">
var app = angular.module('app',['ngSanitize']);
app.controller('MyCtrl',['$scope',function ($scope) {
$scope.html = '<span>我是html元素</span>';
$scope.str="字符串";
}])
</script>
</body>
</html>
二.$ sce服务
<!DOCTYPE html >
<html lang="en" ng-app='app'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="angular.js"></script>
</head>
<body ng-controller='MyCtrl'>
<div ng-bind-html="html"></div>
<div ng-bind="str"></div>
<script type="text/javascript">
var app = angular.module('app',[]);
app.controller('MyCtrl',['$scope','$sce',function ($scope,$sce) {
$scope.html = $sce.trustAsHtml('<span>我是html元素</span>');
$scope.str='字符串';
}])
</script>
</body>
</html>
直接通过$sce.trustAsHtml绑定到显式信任的值!
4.ng-bind-template
作用:为指定元素文本内容替换为ngBindTemplate属性中模板的值
注意:它的作用和ng-bind的类似,也不能解析html元素,但是它可以解析多个表达式,写法上要表达式用{{ }}的形式
<!DOCTYPE html >
<html lang="en" ng-app='app'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="angular.js"></script>
</head>
<body ng-controller='MyCtrl'>
<div ng-bind-html="html"></div>
<div ng-bind="str"></div>
<div ng-bind-template='{{html}}{{str}}'>
<script type="text/javascript">
var app = angular.module('app',[]);
app.controller('MyCtrl',['$scope','$sce',function ($scope,$sce) {
$scope.html = $sce.trustAsHtml('<span>我是html元素</span>');
$scope.str='字符串';
}])
</script>
</body>
</html>
总结:只有ng-bind-html可以对html元素进行解析,并且要与安全的方式插入,只有ng-bind-template可以包含多个表达式(表达式要用{{ }}形式),ngInit的唯一适当用法是为ngRepeat的特殊属性使用别名。