标签：angular js
Angular Js总结（一）
创建自定义指令
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective",function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
调用方式：元素名、属性、类名、注释
<runoob-directive></runoob-directive>
<div runoob-directive></div>
<div class="runoob-directive"></div>
<!-- 指令: runoob-directive -->
限制使用：E 只限元素名使用 A 只限属性使用 C 只限类名使用 M只限注释使用
例如
restrict : "A",
template : "<h1>自定义指令!</h1>"
2. ng-model 指令的4种状态：invalid, dirty, touched, error
注意error用法
其他3个状态使用：依次分别是合法、值改变、触屏点击
<form ng-app="" name="myForm" ng-init="myText = ‘test@runoob.com‘">
Email:
<input type="email" name="myAddress" ng-model="myText" required></p>
<h1>状态</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>
3. Scope
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>我的名字是 {{name}}</h1>
</div>
<script>
var app =angular.module(‘myApp‘, []);
app.controller(‘myCtrl‘, function($scope) {
$scope.name = "John Dow";
});
</script>
根作用域：$rootScope
注：所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
4. 过滤器
过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式、指令中
用法例如：<p>姓名为 {{ lastName | uppercase }}</p>
<li ng-repeat="x in names | orderBy:‘country‘">
{{x.name + ‘, ‘ + x.country }}
</li>
过滤输入时要注意：输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称
例：
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:‘country‘">
{{(x.name | uppercase) + ‘, ‘ + x.country }}
</li>
</ul>
</div>
5. 服务Service
AngularJS 内建了30 多个服务（服务可以作为参数传递到controller中）
一些常用的服务有：
有个 $location 服务，它可以返回当前页面的 URL 地址。
$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。
AngularJS $timeout 服务对应了 JS window.setTimeout 函数
AngularJS $interval 服务对应了 JS window.setInterval 函数
创建自定义服务实例：
创建名为hexafy 的访问:
app.service(‘hexafy‘, function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
使用自定义的的服务 hexafy 将一个数字转换为16进制数:
app.controller(‘myCtrl‘, function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
下面给个实例，注意遍历以及自定义的服务在自定义的过滤器中的使用
app.filter(‘myFormat‘,[‘hexafy‘, function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
app.controller(‘myCtrl‘, function($scope) {
$scope.counts = [255, 251, 200];
});
本文出自 “8061125” 博客，请务必保留此出处http://8071125.blog.51cto.com/8061125/1766325
标签：angular js
原文地址：http://8071125.blog.51cto.com/8061125/1766325
