注釋和代碼都寫在一起了:有看不懂的可以提問:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>復習</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0 ;
padding: 0 ;
}
</style>
</head>
<body ng-controller="mainController">
<!-- <h1>我是{{ pmsg }}</h1> -->
<!-- 花括號里面是變量名(屬性名),不能寫漢字 -->
body說,我是父集 <input type="text" ng-model="pmsg" name="">
{{ pmsg }}
<my-directive
msg="abc"
a="aaa"
per-msg="ghi"
pmsg="{{ pmsg }}"
c="pmsg"
d="pEvent(e)"
>
<!-- 小指令里面有一個屬性,叫b,或者叫pmsg也行,因為指令的名稱叫pmsg,后面@再跟上b,屬性名就可以改為b,這個屬性是一個表達式,這樣寫了,父集可以修改子集,但子集不能修改父集了 -->
</my-directive>
<!-- <div my-directive></div>
<div class="my-directive"></div> -->
<!--directive:myDirective -->
</body>
<script src="./angular.min.js" charset="utf-8"></script>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("mainController",["$scope",function($scope){
$scope.pmsg = "父集內(nèi)容";
// $scope.items=["d","e","f"];
$scope.pEvent = function(e){
console.log("事件被執(zhí)行");
return "Math.random()";
};//傳入指令 d="pEvent"
}]);
app.directive("myDirective",function(){
//directive 自定義指令不用像controller一樣,在中括號里面寫$scope
return {
scope:{
msg : "@",//指令需要查找一個名叫msg的屬性 單項數(shù)據(jù)(字符串)傳遞
msg2 : "@a",//指令先開發(fā)好, 指令需要查找屬性名叫 a 的屬性
perMsg :"@",// 如果屬性帶有- ,指令名稱就寫為駝峰式,指令就會查找per-msg的屬性
pmsg : "@",//父集可以影響子集,但子集不能影響父集
c : "=",//=叫做雙向綁定(變量綁定),用了這個=,變量不用加雙{{}}, 變量傳遞
d : "&",//方法的向下傳遞 父集方法傳遞
},//用scope隔斷了父子集之間的修改,引用模板里面的提示也不在了
templateUrl : "./temp.html",//localhost才能訪問,不能本地訪問
/*template : `
<div>
<h1>我的第一個自定義指令</h1>
<h3>{{ name }}</h3>
</div>
`,*///盡量不要出現(xiàn)兩個同級的,用一個div包起來
restrict : "ECMA",//限制,寫上這個帶class的div 才能出現(xiàn)
//replace : true,//被注釋的那行也顯示了 只剩4個h1標簽,沒有div了
controller : "myController",//控制器是字符串類型的 function類型也行,但得有一個scope形參
/*controller:function($scope){
$scope.name = "tom"http://更改了原來沒有conroller的內(nèi)容
}*/
/*controller:["$scope",function($scope){
$scope.name = "merry"http://也替換了之前的tom
}]*/
}
});
app.directive("myDirective2",function(){
return {
template:"<h3>小指令</h3>"
}
});
app.controller("myController",["$scope",function($scope){
$scope.name = "zhar";
}])
</script>
</html>
這是另一個html頁,通過模板路徑鏈接過來的,寫法很簡潔
<div>
<h1>還是指令 漂亮的下拉菜單</h1>
<h1>nihao</h1>
{{ name }}
<hr>
父集的消息:{{ pmsg }}<br>
我是指令里面的子集: <input type="text" ng-model="pmsg">
<!-- <select>
<option ng-repeat="item in items">{{ item }}</option>
</select> -->
<h1>我是msg------{{ msg }}</h1>
<h3>我是msg2------{{ msg2 }}</h3>
<h3>我是per-msg------{{ perMsg }}</h3>
<h3>我是pmsg------{{ pmsg }}</h3>
<h3>我是c屬性------{{ pmsg }}</h3>
<input type="text" ng-model="c">
<h3>{{ d({e:"此消息來自子集"}) }}</h3>
</div>
<div>
<h1>我是不一樣的煙火</h1>
<my-directive2></my-directive2>
<my-directive2></my-directive2>
<my-directive2></my-directive2>
<my-directive2></my-directive2>
</div>
以下是臟查詢的內(nèi)容,一點點,
var app = angular.module("myApp",[]);
app.controller("myController",["$scope","$timeout",function($scope,$timeout){
$scope.name="zhar";
//$interval
$timeout(function(){
$scope.name = "new name";
console.log($scope.name);
// $scope.$apply();//手動強制觸發(fā)臟查詢
},1000)
}])
