angularJS 中$attrs方法使用指南
这里给大家分享的是一个angularJS中$attrs方法的使用示例：
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>
无标题文档
</title>
<scriptsrc="http://localhost:81/js/jquery.js">
</script>
<scriptsrc="http://localhost:81/js/angular.min.js">
</script>
</head>
<bodyng-app="Demo">
<diva>
a_directive
</div>
<divng-controller="TestCtrl">
<h1t>
原始内容
</h1>
<h2t2>
原始内容
</h2>
<h3t3="hiphop"title2="{{name}}">
原始内容
</h3>
<divcompile></div>
<div>
<testa="{{a}}"bc="xxx"></test>
<buttonng-click="a=a+1">
修改
</button>
</div>
<tea="1"ys-a="123"ng-click="show(1)">这里</te>
</div>
<script>
varapp=angular.module('Demo',[],angular.noop);
app.controller("TestCtrl",
function($scope){
$scope.name="qihao";
});
app.directive("t",
function(){
return{
controller:function($scope){$scope.name="qq"},
template:"<div>test:implementToParent{{name}}</div>",
replace:true,
scope:true //作用域是继承的,默认就是继承的
}
});
app.directive("t2",
function(){
return{
controller:function($scope){$scope.name="nono"},
template:"<div>test:implementToParent{{name}}</div>",
replace:true,
restrict:"AE"
}
});
app.directive("t3",
function(){
return{
template:"<div>test:implementToParent_titleIs:{{title}}<br>title2Is:{{title2}}</div>",
replace:true,
restrict:"AE",
scope:{
title:"@t3",
title2:"@title2"
}
}
});
app.directive('a',
function(){
varfunc=function(){
console.log('compile');
returnfunction(){
console.log('link');
}
}
varcontroller=function($scope,$element,$attrs,$transclude){
//$transclude：是指令标签的复制体
console.log('controller');
console.log($scope);
console.log($transclude);
//$transclude接受两个参数，你可以对这个克隆的元素进行操作，
varnode=$transclude(function(clone_element,scope){
$element.append(clone_element);
$element.append("<span>spanTag___</span>");
console.log(clone_element);
console.log('--');
console.log(scope);
});
console.log(node);
}
return{
compile:func,
template:"<h1ng-transclude></h1>",
controller:controller,
transclude:true,
restrict:'AE'
}
});
app.directive('compile',function(){
varfunc=function(){
console.log('acompile');
return{
pre:function(){
console.log('alinkpre')
},
post:function(){
console.log('alinkpost')
},
}
}
return{
restrict:"AE",
compile:func
}
})
app.directive('test',function(){
varfunc=function($element,$attrs){
console.log($attrs);
$attrs.$observe('a',function(new_v){
console.log(new_v);
});
}
return{compile:func,
restrict:'E'}
});
app.controller('TestCtrl',function($scope){
$scope.a=123;
});
app.directive('te',function(){
varfunc=function($scope,$element,$attrs,$ctrl){
console.log($ctrl)
//$attrs.$set.给这个属性设置b，值为ooo，就是这样
$attrs.$set('b','ooo');
$attrs.$set('a-b','11');
//这个还有点不懂啊//第二个参数值
$attrs.$set('c-d','11',true,'c_d');
console.log($attrs);
}
return{
compile:function(){
returnfunc
},
restrict:'E'
}
});
app.controller('TestCtrl',function($scope){
$scope.show=function(v){console.log(v);}
});
</script>
</body>
</html>
本文内容就到这里了，希望大家能对angularJS中$attrs的使用有了新的认识，希望大家能够喜欢本文。