angularJS 中$attrs方法使用指南
网络编程 2021-07-04 21:47www.168986.cn编程入门
这篇文章主要介绍了angularJS 中$attrs方法使用指南,需要的朋友可以参考下
这里给大家分享的是一个angularJS 中$attrs方法的使用示例:
代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
无标题文档
</title>
<script src="">
</script>
<script src="">
</script>
</head>
<body ng-app="Demo">
<div a>
a_directive
</div>
<div ng-controller="TestCtrl">
<h1 t>
原始内容
</h1>
<h2 t2>
原始内容
</h2>
<h3 t3="hiphop" title2="{{name}}">
原始内容
</h3>
<div pile></div>
<div>
<test a="{{ a }}" b c="xxx"></test>
<button ng-click="a=a+1">
修改
</button>
</div>
<te a="1" ys-a="123" ng-click="show(1)">这里</te>
</div>
<script>
var app = 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() {
var func = function() {
console.log('pile');
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("<span>spanTag___</span>");
console.log(clone_element);
console.log('--');
console.log(scope);
});
console.log(node);
}
return {
pile: func,
template: "<h1 ng-transclude></h1>",
controller: controller,
transclude: true,
restrict: 'AE'
}
});
app.directive('pile',function() {
var func = function() {
console.log('a pile');
return {
pre: function() {
console.log('a link pre')
},
post: function() {
console.log('a link post')
},
}
}
return {
restrict : "AE",
pile : func
}
})
app.directive('test', function(){
var func = function($element, $attrs){
console.log($attrs);
$attrs.$observe('a', function(new_v){
console.log(new_v);
});
}
return {pile: 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 {
pile: function(){
return func
},
restrict: 'E'
}
});
app.controller('TestCtrl', function($scope){
$scope.show = function(v){console.log(v);}
});
</script>
</body>
</html>
本文内容就到这里了,希望大家能对angularJS 中$attrs的使用有了新的认识,希望大家能够喜欢本文。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程