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{
        
    }
</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>