您的位置：首页 > Web前端 > AngularJS

AngularJs的directive指令的link属性详解

2018-02-10 10:46 681 查看
在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>
link属性中，注释的那部分与没有注释的那部分，最后在浏览器中实现的效果是一样的！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航