<html ng-app="myApp">
<head>
<meta charset="utf-8"/>
<title></title>
<script type="text/javascript" src="./angular.min.js"></script>
</head>
<body ng-controller="mainController">
原父級內(nèi)容:{{pmsg}}
<input type="text" name="" ng-model="pmsg" >
<!-- 出入數(shù)據(jù)指令 加上值 環(huán)境為body 只是嵌入到標簽內(nèi) -->
<my-directive msg="abc" a="abc" b="{{pmsg}}" c="pmsg" d="pEvent(m)"></my-directive>
</body>
<script type="text/javascript">
// 在正式的開發(fā)中子級不應該影響父級的數(shù)據(jù) 也不應該直接使用父級的數(shù)據(jù) 而是要由父級傳入數(shù)據(jù)
var app=angular.module("myApp",[]);
app.controller("mainController",["$scope",function($scope){
$scope.pmsg="父級內(nèi)容";
$scope.pEvent=function(m){
console.log("事件被執(zhí)行")
return "a"
}
}]);
app.directive("myDirective",function(){
return{
scope:{//創(chuàng)建一個隔開的作用域 現(xiàn)在子級就不能修改父級數(shù)據(jù)了 并且也不能直接獲得父級的數(shù)據(jù)
//里面的數(shù)據(jù)都會是傳入進去的
msg:"@", //@單項傳遞 首先在scope中創(chuàng)建 鍵 然后傳入tempmate中輸出 在到需要調(diào)用的地方調(diào)用
msg2:"@a",
pmsg:"@b",
//@ 如果后面沒有任意字符 必須傳入鍵名 如果接了任意字符 就會找@ 后的字符串.在
//template中傳入的和scope中的是一樣的
c:"=",// = 表示雙向綁定,子級和父級改一個另一個也會更改 用法和@一樣,只是變量不需要"{{}}"
d:"&",// & 父級方法傳遞
},
template:`
<div>
<h2>自定義指令</h2>
使用父級的消息:{{pmsg}}
<input type="text" ng-model="pmsg"/>
<h3>{{msg}}</h3>
<p>{{msg2}}</p>
<input type="text" ng-model="c"/>
<h3>{{d({m:"此消息來自子級"})}}</h3>
</div>
`
link:function(scope,el,attrs){//angularjs 聲明周期之一 鏈接階段 在此階段 DOM已經(jīng)渲染完畢 可以安全使用
//link 階段常用于事件添加或是樣式的后修改
//scope打印為 scope內(nèi)容 el 打印為模板內(nèi)容 attrs 為DOM屬性值
//angular 內(nèi)置輕量級的jquery
angular.element(el).find("h3").css()
}
controller:"myController"
}
app.controller(myController,["$scope",function($scope){
}])
</script>
</html>```AngularJS 自定義指令(2)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進店門捏雌，熙熙樓的掌柜王于貴愁眉苦臉地迎上來跃赚，“玉大人，你說我怎么就攤上這事性湿∥嘲粒” “怎么了？”我有些...
- 文/不壞的土叔 我叫張陵肤频，是天一觀的道長叹括。 經(jīng)常有香客問我，道長宵荒，這世上最難降的妖魔是什么领猾？ 我笑而不...
- 正文 為了忘掉前任，我火速辦了婚禮骇扇，結(jié)果婚禮上摔竿，老公的妹妹穿的比我還像新娘。我一直安慰自己少孝，他們只是感情好继低，可當我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著稍走，像睡著了一般袁翁。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上婿脸，一...
- 文/蒼蘭香墨 我猛地睜開眼野哭，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了幻件？” 一聲冷哼從身側(cè)響起拨黔，我...
- 正文 年R本政府宣布得院，位于F島的核電站傻铣，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏祥绞。R本人自食惡果不足惜非洲，卻給世界環(huán)境...
- 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蜕径。 院中可真熱鬧两踏，春花似錦、人聲如沸兜喻。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽朴皆。三九已至帕识，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間遂铡，已是汗流浹背肮疗。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- AngularJS 指令 | 菜鳥教程(2) scope:Boolean or Object scope參數(shù)的作用...
- AngularJS 路由 路由就是監(jiān)聽錨點的變化 AngularJS 1.6版本區(qū)別 請求數(shù)據(jù)返回結(jié)果時蒂教，能正確得...
- 專注于自己的事情，不要被其他的事情所干擾梦皮。 這是一句看起來太不起眼的一個道理炭分。我們都太熟悉了。 正是這種眾人皆知的...
