26、AngularJs的directive指令的link属性详解

阅读() @2018-10-29 18:16:10

在AngularJs中不能直接使用JQuery去选择dom元素,它在指令directive中提供了link属性来让开发者操作dom,具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body ng-app="app">
	<zym-blog title="赵一鸣AngularJs学习笔记" fontsize="30px" fontcolor="#f00"></zym-blog>
</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.directive('zymBlog', [function(){
		return {
			restrict : 'E',
			scope : {
				'title' : '@title',
				'fontsize' : '@fontsize',
				'fontcolor' : '@fontcolor'
			},
			link : function(scope, element, attr){
				console.log(scope);
				console.log(attr);
				//$(element).text(scope.title).css({'color': scope.fontcolor, 'fontSize': scope.fontsize});
				$(element).text(attr.title).css({'color': attr.fontcolor, 'fontSize': attr.fontsize});
			}
		}
	}]);
</script>

link属性中,注释的那部分与没有注释的那部分,最后在浏览器中实现的效果是一样的!

微信二维码