angularJS 中$attrs方法使用指南
更新時(shí)間：2015年02月09日 10:00:42 投稿：hebedich
這篇文章主要介紹了angularJS 中$attrs方法使用指南,需要的朋友可以參考下
這里給大家分享的是一個(gè)angularJS 中$attrs方法的使用示例：
復(fù)制代碼 代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
無標(biāo)題文檔
</title>
<script src="http://localhost:81/js/jquery.js">
</script>
<script src="http://localhost:81/js/angular.min.js">
</script>
</head>
<body ng-app="Demo">
<div a>
a_directive
</div>
<div ng-controller="TestCtrl">
<h1 t>
原始內(nèi)容
</h1>
<h2 t2>
原始內(nèi)容
</h2>
<h3 t3="hiphop" title2="{{name}}">
原始內(nèi)容
</h3>
<div compile></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 //作用域是繼承的,默認(rèn)就是繼承的
}
});
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('compile');
return function() {
console.log('link');
}
}
var controller = function($scope, $element, $attrs, $transclude) {
//$transclude ：是指令標(biāo)簽的復(fù)制體
console.log('controller');
console.log($scope);
console.log($transclude);
//$transclude接受兩個(gè)參數(shù)，你可以對(duì)這個(gè)克隆的元素進(jìn)行操作，
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 {
compile: func,
template: "<h1 ng-transclude></h1>",
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. 給這個(gè)屬性設(shè)置b，值為ooo，就是這樣
$attrs.$set('b', 'ooo');
$attrs.$set('a-b', '11');
//這個(gè)還有點(diǎn)不懂啊 //第二個(gè)參數(shù)值
$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);}
});
</script>
</body>
</html>
本文內(nèi)容就到這里了，希望大家能對(duì)angularJS 中$attrs的使用有了新的認(rèn)識(shí)，希望大家能夠喜歡本文。
相關(guān)文章
使用AngularJS來實(shí)現(xiàn)HTML頁面嵌套的方法
這篇文章主要介紹了使用AngularJS來實(shí)現(xiàn)HTML頁面嵌套的方法,主要用到了AngularJS中的ng-include指令,需要的朋友可以參考下2015-06-06
angular實(shí)現(xiàn)spa單頁面應(yīng)用實(shí)例
本篇文章主要介紹了angular實(shí)現(xiàn)spa單頁面應(yīng)用實(shí)例，小本篇文章是對(duì)單頁面的一個(gè)簡(jiǎn)單的基本邏輯操作，這個(gè)方法可以搭建基本的單頁面的邏輯結(jié)構(gòu)。一起跟隨小編過來看看吧2017-07-07
下面小編就為大家?guī)硪黄獪\談Angular中ngModel的$render。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
AngularJS基礎(chǔ) ng-cut 指令介紹及簡(jiǎn)單示例
本文主要介紹AngularJS ng-cut 指令,這里對(duì)ng-cut指令的基礎(chǔ)資料進(jìn)行了整理,和詳細(xì)介紹,并附上代碼示例和實(shí)現(xiàn)效果圖,學(xué)習(xí)AngularJS 指令的朋友可以參考下2016-08-08
angular.js + require.js構(gòu)建模塊化單頁面應(yīng)用的方法步驟
這篇文章主要給大家介紹了關(guān)于利用angular.js + require.js構(gòu)建模塊化單頁面應(yīng)用的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-07-07
這篇文章主要介紹了Angular4 組件通訊方法大全(推薦)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
詳解AngularJs ui-router 路由的簡(jiǎn)單介紹
本篇文章主要介紹了AngularJs ui-router 路由的簡(jiǎn)單介紹。簡(jiǎn)單明了的說明了ngRoute和ui-router的區(qū)別和用法，有興趣的可以了解一下2017-04-04
使用ionic播放輪詢廣告的實(shí)現(xiàn)方法(必看)
下面小編就為大家?guī)硪黄褂胕onic播放輪詢廣告的實(shí)現(xiàn)方法(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了AngularJS ui-router刷新子頁面路由的方法，網(wǎng)上雖然有很多種方法，但是都不適合小編，今天小編給大家分享一個(gè)還不錯(cuò)的方法，需要的朋友可以參考下2018-07-07
利用Angularjs中模塊ui-route管理狀態(tài)的方法
這篇文章主要給大家介紹了如何用Angularjs中的模板ui-route來管理狀態(tài)的方法,文中通過示例代碼介紹的很詳細(xì)，相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值，有需要的朋友可以一起來學(xué)習(xí)學(xué)習(xí)。2016-12-12