注释和代码都写在一起了:有看不懂的可以提问:
<!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 = "父集内容";
// $scope.items=["d","e","f"];
$scope.pEvent = function(e){
console.log("事件被执行");
return "Math.random()";
};//传入指令 d="pEvent"
}]);
app.directive("myDirective",function(){
//directive 自定义指令不用像controller一样,在中括号里面写$scope
return {
scope:{
msg : "@",//指令需要查找一个名叫msg的属性 单项数据(字符串)传递
msg2 : "@a",//指令先开发好, 指令需要查找属性名叫 a 的属性
perMsg :"@",// 如果属性带有- ,指令名称就写为驼峰式,指令就会查找per-msg的属性
pmsg : "@",//父集可以影响子集,但子集不能影响父集
c : "=",//=叫做双向绑定(变量绑定),用了这个=,变量不用加双{{}}, 变量传递
d : "&",//方法的向下传递 父集方法传递
},//用scope隔断了父子集之间的修改,引用模板里面的提示也不在了
templateUrl : "./temp.html",//localhost才能访问,不能本地访问
/*template : `
<div>
<h1>我的第一个自定义指令</h1>
<h3>{{ name }}</h3>
</div>
`,*///尽量不要出现两个同级的,用一个div包起来
restrict : "ECMA",//限制,写上这个带class的div 才能出现
//replace : true,//被注释的那行也显示了 只剩4个h1标签,没有div了
controller : "myController",//控制器是字符串类型的 function类型也行,但得有一个scope形参
/*controller:function($scope){
$scope.name = "tom"//更改了原来没有conroller的内容
}*/
/*controller:["$scope",function($scope){
$scope.name = "merry"//也替换了之前的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>
以下是脏查询的内容,一点点,
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();//手动强制触发脏查询
},1000)
}])
