Angular Js总结（一）

  1. 创建自定义指令

使用驼峰法来命名一个指令， 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

scope是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用 ，如果你修改了视图，模型和控制器也会相应更新（数据的双向绑定）

 

<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];

});