这里给大家分享的是一个angularJS 中$attrs方法的使用示例：
<br>
无标题文档<br>
a_directive
<script><br />
var app = angular.module('Demo', [], angular.noop);<br />
app.controller("TestCtrl",<br />
function($scope) {<br />
$scope.name = "qihao";<br />
});<br />
app.directive("t",<br />
function() {<br />
return {<br />
controller : function($scope){$scope.name = "qq"},<br />
template : "<div>test:implementToParent{{name}}</script>
",
replace : true,
scope : true //作用域是继承的,默认就是继承的
}
});
app.directive("t2",
function() {
return {
controller : function($scope){$scope.name = "nono"},
template : "
test:implementToParent{{name}}
",
replace : true,
restrict : "AE"
}
});
app.directive("t3",
function() {
return {
template : "
test:implementToParent_titleIs:{{title}}
title2Is:{{title2}}
",
replace : true,
restrict : "AE",
scope : {
title : "@t3",
title2 : "@title2"
}
}
});
app.directive('a',
function() {
var func = function() {
console.log('compile');
return function() {
console.log('link');
}
}
var controller = function($scope, $element, $attrs, $transclude) {
//$transclude ：是指令标签的复制体
console.log('controller');
console.log($scope);
console.log($transclude);
//$transclude接受两个参数，你可以对这个克隆的元素进行操作，
var node = $transclude(function(clone_element, scope) {
$element.append(clone_element);
$element.append("
spanTag___");
console.log(clone_element);
console.log('--');
console.log(scope);
});
console.log(node);
}
return {
compile: func,
template: "
",
controller: controller,
transclude: true,
restrict: 'AE'
}
});
app.directive('compile',function() {
var func = function() {
console.log('a compile');
return {
pre: function() {
console.log('a link pre')
},
post: function() {
console.log('a link post')
},
}
}
return {
restrict : "AE",
compile : func
}
})
app.directive('test', function(){
var func = 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(){
var func = 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(){
return func
},
restrict: 'E'
}
});
app.controller('TestCtrl', function($scope){
$scope.show = function(v){console.log(v);}
});
本文内容就到这里了，希望大家能对angularJS 中$attrs的使用有了新的认识，希望大家能够喜欢本文。
