AngularJs的directive指令的link属性详解

最新推荐文章于 2021-12-28 22:46:13 发布

K'illCode

最新推荐文章于 2021-12-28 22:46:13 发布

阅读量1.4k

点赞数

分类专栏： angularJS 文章标签： angularJs

本文链接：https://blog.csdn.net/Dome_/article/details/79277522

版权

angularJS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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

 
       01<!DOCTYPE html>
 
       02<html lang="en">
 
       03<head>
 
       04    <meta charset="UTF-8">
 
       05    <title>Document</title>
 
       06</head>
 
       07<body ng-app="app">
 
       08    <zym-blog title="赵一鸣AngularJs学习笔记" fontsize="30px" fontcolor="#f00"></zym-blog>
 
       09</body>
 
       10</html>
 
       11<script type="text/javascript" src="http://www.zymseo.com/js/demo.js"></script>
 
       12<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
 
       13<script type="text/javascript">
 
       14    var m = angular.module('app', []);
 
       15    m.directive('zymBlog', [function(){
 
       16        return {
 
       17            restrict : 'E',
 
       18            scope : {
 
       19                'title' : '@title',
 
       20                'fontsize' : '@fontsize',
 
       21                'fontcolor' : '@fontcolor'
 
       22            },
 
       23            link : function(scope, element, attr){
 
       24                console.log(scope);
 
       25                console.log(attr);
 
       26                //$(element).text(scope.title).css({'color': scope.fontcolor, 'fontSize': scope.fontsize});
 
       27                $(element).text(attr.title).css({'color': attr.fontcolor, 'fontSize': attr.fontsize});
 
       28            }
 
       29        }
 
       30    }]);
 
       31</script>