ng-bind

绑定的熟悉值发生变化后自动同步到页面, 注意通过 ng-bind 的指令绑定的内容只会显示 字符串, 不可以是 html 结构的标签
<div ng-app="myApp">
	<p ng-controller="myAppCon">
		<span ng-bind="text"></span>
	</p>
</div>
<script>
	angular.module('myApp', [])
		.controller('myAppCon', ['$scope', function($scope) {
			let text = "我是 angular 程序, 我通过 bind 显示到页面";
   			$scope.text = `${text}-${parseInt(Math.random() * 1000)}`;
     	}]);
</script>

ng-bind-html

ng-bind-html 可以插入一段 html 片段,前面提到的一些指令都能绑定字符串, 不能是 html 结构的标签元素内容
<div ng-app="myApp">
	<div ng-controller="myAppCon">
	 	<p ng-bind-html="myhtml"></p>
	</div>
</div>
<script src="angular-sanitize.js"></script>
<script>
	angular.module('myApp', ['ngSanitize'])
		.controller('myAppCon', ['$scope', function($scope) {
		  	$scope.myhtml = '<i>我是动态加入的 html 片段</i>';
		}]);
</script>	
使用 ng-bind-html 需要使用 angular-sanitize.js 模块

下载 angular-sanitize.js


ng-bind-template

ng-bind-template 可以是多个表达式,不同于其它的,里面的属性必须使用 {{ }}
<div ng-app="myApp">
	<div ng-controller="ExampleController">
	 	<p ng-bind-template="{{text1}} - {{text2}}"></p>
	</div>
</div>
<script>
	angular.module('myApp', ['ngSanitize'])
		.controller('ExampleController', ['$scope', function($scope) {
		  	$scope.text1 = "hello";
		  	$scope.text2 = "angular.js";
		}]);
</script>