Angular 指令中 pre 和 post link 中的打印属性

我正在尝试在角指令中访问和打印类名称。但是，我没有得到期望的结果。取而代之的是，对于所有值而言，不确定。

//module declaration 
var app = angular.module('myApp',[]);
//controller declaration
app.controller('myCtrl',function($scope){
$scope.name = "Peter";
});
//app declaration
app.directive('myStudent',function(){
return{
	template: "Hi! Dear!! {{name}}<br/>",
	compile:function(elem, attr){
		console.log("compile");
		return{
			pre:function(scope,elem,attr){
				console.log("pre"+ this.class) ;
			},
			post:function(scope,elem,attr){
				console.log("post"+ this.class);
			}					
		}
	},
}
});

<body ng-app="myApp" ng-controller="myCtrl"> 
<my-student class="one"></my-student> 
<my-student class="two"></my-student> 
<my-student class="three"></my-student> 
<my-student class="four"></my-student> 
<my-student class="five"></my-student> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script> 
</body>

然后尝试使用 attr.Class

app.directive('myStudent',function(){
return{
    template: "Hi! Dear!! {{name}}<br/>",
    compile:function(elem, attr){
        console.log("compile");
        return{
            pre:function(scope,elem,attr){
                console.log("pre"+ attr.class) ;
            },
            post:function(scope,elem,attr){
                console.log("post"+attr.class);
            }                   
        }
    },
}
});

使用链接函数的elem或attr参数。请注意，elem.attr('class')将为您提供实际的类列表，包括Angular添加的类，例如ng-binding。attr['class']将为您提供原始的"一个"，"两个" ...

//module declaration 
var app = angular.module('myApp',[]);
//controller declaration
app.controller('myCtrl',function($scope){
$scope.name = "Peter";
});
//app declaration
app.directive('myStudent',function(){
return{
	template: "Hi! Dear!! {{name}}<br/>",
	compile:function(elem, attr){
		console.log("compile");
		return{
			pre:function(scope,elem,attr){
				console.log("pre"+ elem.attr('class')) ;
			},
			post:function(scope,elem,attr){
				console.log("post"+ attr['class']);
			}					
		}
	},
}
});

<body ng-app="myApp" ng-controller="myCtrl"> 
<my-student class="one"></my-student> 
<my-student class="two"></my-student> 
<my-student class="three"></my-student> 
<my-student class="four"></my-student> 
<my-student class="five"></my-student> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script> 
</body>

相关内容

最新更新

热门标签：