23、AngularJs之scope隔离作用域之=双向文本绑定

阅读() @2019-03-17 16:05:14

AngularJs之scope隔离作用域之=双向文本绑定,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body ng-app="app">
	<div ng-controller="ctr1">
		<input type="text" ng-model="color" />
		<div zym-blog colors="color"></div><!--写成属性color的形式,而不是表达式{{color}}-->
	</div>
</body>
</html>
<script type="text/javascript" src="http://www.zymseo.com/js/demo.js"></script>
<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
<script type="text/javascript">
	var m = angular.module('app', []);
	m.controller('ctr1', ['$scope', function($scope){
		$scope.color = '#f00';
	}]);
	m.directive('zymBlog', [function(){
		return {
			restrict : 'AEC',
			template : '<p><span style="color:{{color}}">赵一鸣AngularJs学习笔记</span><input type="text" ng-model="color" /></p>',
			scope : {color:'=colors'}//这里要用【=】
		}
	}]);
</script>

当改变指令里边的input值的时候,控制器里边的值也发生变化,同样的,改变控制器中input的值,指令中的input值会发生变化,达到了双向数据绑定的目的!

微信二维码