1.自定义指令，直接栗子：
note：定义指定是驼峰，2部分 前缀+作用，but 调用 改驼峰首字母大写处为 （-首字母小写）
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.js"></script>
</head>
<body ng-controller="ctl">
<div say-hello test-name="Hello World"></div>
<script>
var app=angular.module('myApp',['ng'])//自定义指令
app.directive('sayHello',function () {
return {
restrict:'EACM', /*可以作为 E element A attribute C class M comment*/
replace:true, //作为conmment使用
template:'<h2> Hello <Directive></Directive> {{testName}}</h2>',
scope:{ //数据传入
testName:'@ '
}
}
});
app.controller('ctl',function ($scope) {
})
</script>
</body>
</html>
2.双向绑定
双向绑定：模型数据绑定到视图 视图数据绑定到模型
ngModel 表单组件中
$scope.$watch(key,function)监听$scope值的改变
<body ng-controller="ctl"> <div class="container"> <div class="sel"> <select name="" id="" ng-model="selv"> <option value="1">pic1 </option> <option value="2">pic2 </option> </select> </div> <div class="imgbox"> <img alt="" ng-src="img/{{selv}}.png"> </div> <div class="btn"> <input type="checkbox" ng-model="btn">是否同意 <button id="btn1" ng-disabled="!btn">注册</button> </div> </div> <script> var app = angular.module('myapp', ['ng']); app.controller('ctl', function ($scope) { }); </script>
3. 过滤器和函数
作用：用在表达式中，实现对表达式结果的赛选，过滤，格式化
语法：{{表达式| 过滤器名称}}中间管道符号分开 eg：<p>{{num|currency}}</p>
limitTo：n 限制条数
temp in list foreach
orderBy
angular.toJson(obj, [pretty] 点点点。。。<li ng-repeat="tmp in list| orderBy:'age':false|limitTo:2"> {{tmp.age}} {{tmp.name}} </li>
4.服务server
$rootScope 与 $scope 作用域对象
$rootScope id$1
$Scope id$2 递增 公用数据保存在$rootScope里面 私有的保存在对应的 $scope里面
例子：
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.js"></script> </head> <body ng-controller="ctl"> <table> <thead> <tr> <td>请选择</td> <td>姓名</td> <td>生日</td> </tr> </thead> <tbody> <tr ng-repeat="men in arr"> <td><input type="checkbox" ng-model="men.status" ng-checked="selAll"></td> <td>{{men.name}}</td> <td>{{men.birthDay}}</td> </tr> <tr> <td><input type="checkbox" ng-model="selAll"></td> <td>全选</td> <td></td> </tr> </tbody> </table> <button ng-click="show()">查看</button> <script> var app = angular.module('myApp', ['ng']); app.controller('ctl', function ($scope) { $scope.arr = [{name: "king", birthDay: "1992.12.11", status: false}, { name: "fly", birthDay: "1944.12.11", status: false }, {name: "mary", birthDay: "1920.12.11", status: false}]; $scope.show = function () { var str = ""; angular.forEach($scope.arr, function (value, key) { if (value.status) { str += value.name + "被选中了 "; } }); if (str == '') { alert("都没选中"); } else alert(str); }; $scope.$watch('selAll', function () { angular.forEach($scope.arr, function (value, key) { $scope.arr[key].status = $scope.selAll }) }) }) </script> </body> </html>