AngularJS----基本操作

之前的学习基本了解了AngularJS的常用方法，下来就继续学习吧。

创建自定义的指令

除了内置指令，我们可以创建自定义指令。通过.directive函数来添加。

    <div change-data>
        11
    </div>

---

    //自定义指令
     app.directive("changeData",function(){
     return {
           template:"<h1>这个我自定义的！</h1>"
           };
     });

需要注意：要是使用驼峰法命名指令，例changeData,在使用的时候必须以-分割。change-data就像上面的那个一样;这里面return { }中不只一个返回值，按照教程上面还有很多。

验证输入

邮箱验证：这里的验证很简单，就是把类型定义为email就行。验证出错显示是在后面，先是隐藏起来，等到出错在显示出来。

---

    <form name="myForm">
        Email:
        <input type="email" name="myAddress" ng-model="text"/>
        <span ng-show="myForm.myAddress.$error.email">这是一个很神奇的报错</span>
    </form>

---

我们看代码的截图就可以发现。

---

这里ng-show里面是指定验证错误的地方。且提示信息会在ng-show属性返回true时显示。

应用状态

可以查看值是否被修改。具体的状态值有invalid(看值是否合法)，dirty(看值是否修改过),touched(看值是否通过触屏点击),error(看是否有误)

    <form name="myForm" ng-init="text='mr-zhanghui@qq.com'">
        Email:
        <input type="email" name="myAddress" ng-model="text" required/>
        <span ng-show="myForm.myAddress.$error.email">这是一个很神奇的报错</span>
        <h1>状态值</h1>
        valid:-----{{myForm.myAddress.$valid}} ---  //值合法为true<br/>
        dirty:-----{{myForm.myAddress.$dirty}}   ---//值是否改变为true<br/>
        touched:---{{myForm.myAddress.$touched}}  ---//是否通过触屏为true<br/>
    </form>

---

修改css类

ng-model指令基于它们的状态为HTML元素提供CSS类通过在style类中的调用.ng-invalid就可以修改其CSS属性

    <style>
        input.ng-invalid{
            background-color:lightblue;
        }
    </style>

---

AngularJS Scope(作用域)

Scope在视图和控制器之间起作用，它是一个对象，有可用的方法和属性。一般应用在视图和控制器上。所有的应用都有一个$rootScope,它可以作用于整个应用中，是各个controller中scope的桥梁。使用rootScope定义的值可以在各个controller中取得。

app.controller("myCtrl",function($scope,$rootScope){
    $scope.namess=['11','22','33'];
    $rootScope.rootPerson="我叫阿辉";    
});

---

    <div ng-init="names=['1','2','3']" ng-controller="myCtrl">
        <li>{{rootPerson}}</li>
        <ul>
            <li ng-repeat="item in names">
                {{item}}
            </li>
            <li ng-repeat="x in namess">
                {{x}}
            </li>
        </ul>        
    </div> 

---

Angular.JS控制器

ng-controller指令定义了应用程序控制器，控制器是JavaScript对象，由标准的JavaScript对象的构造函数创建。

控制器方法：是在控制器里面创建方法，之后在VIEW中调用。感觉前端的语言很屌，感觉要颠覆后端语言的节奏。

    <div ng-controller="method">
        <input type="text" ng-model="firstName"/><br/>
        <input type="text" ng-model="lastName"/><br/>
        {{fullName()}}
    </div>

---

app.controller("method",function($scope){
    $scope.firstName="张";
    $scope.lastName="辉";
    //定义的方法fullName();
    $scope.fullName=function(){
        return $scope.firstName+""+$scope.lastName;
    }
});

---

---

    $scope.persons=[
        {name:'ahui',country:'jiaxin'},
        {name:'ahui',country:'jiaxin'},
        {name:'ahui',country:'jiaxin'}
        ];

    <ul>
          <li ng-repeat="x in persons">
             {{x.name+','+x.country}}
          </li>
    </ul>

---

AngularJS过滤器

AngularJS通过使用管道字符(|)添加到表达式和指令中。

• 向表达式添加过滤器

过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。

---

    <div>
        <input name="text" ng-model="name"/><br/>
        <input name="text" ng-model="pwd"/><br/>
        <h4>
            {{name|uppercase}}<br/>   //大写
            {{pwd|lowercase}}          //小写
        </h4>
    </div>

---

• 向指令添加过滤器

添加方法是一样的；

        <ul>
            <li ng-repeat="x in persons|orderBy:'country'">
                {{x.name+','+x.country}}
            </li>
        </ul>

---

• 过滤输入

输入过滤器可以通过一个管道字符(|)和过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。利用filter从数组中选择一个子集。

<p>输入过滤:</p>

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

---