AngularJS学习（一）——指令

（一）有几个指令用的比较频繁：

1、ng-model：用于双向数据绑定（应用程序数据和控制器中数据），在修改输入域的值时，Angular的属性的值也会跟着修改，{{ }}用于显示数据

ng-model可用于表单认证:

例子：

<form  name="myForm" ng-init="myText = 'test@runoob.com'">
    <label>书名：</label>
    <input type="text" name="Name" class="form-control" ng-model="bookName"  required/>
    <span ng-show="addForm. name.$error.required">书名不能为空</span>
    <p>{{myForm. name.$valid}}</p>
    <p>{{myForm. name.$dirty}}</p>
    <p>{{myForm. name.$touched}}</p>
    <!—上面上个表达式返回的都是Boolean值-->
</form>

 

改变其表单的应用状态：

$invalid不合法的表单

$valid 合法的表单

$dirty 表单数据被改变

$pristine 表单数据没有发生改变

$touched 发生交互，例如input被触发

$error 表单数据出错了。$error返回的是一个对象，它包含了input的每一个验证是有效的还是无效的，是一个集合。有效则为false，无效则为true

（1）必填项

    <input type="text" name="myName" ng-model="username" required />

    在不满足required时，form.myName.$error为{required:true}即form.myName.$error.required=true;

  (2)不合法

       如果表单不合法，form.myName.$error为{invalid:true}即form.myName.$error.invalid=true;

 

表单应用状态的css类

ng-valid：表单通过验证，与之对应的是ng-invalid

ng-touched：未访问状态，与之对应的是ng-untouched

ng-dirty: 发生交互状态，与之对应的是ng-pristine

 

2、ng-bind：也是数据绑定的一种指令，不过它是单向绑定的，从$scope—>view，是用于展示数据的

3、ng-init：数据的初始化命令，例如上面的代码

4、ng-controller：指明该应用的控制器

 

（二）自定义指令

Angular.directive(“myDirective”,functioin(){      
// myDirective是我这个自定义指令的名字,使用驼峰式命名

       return {

              restrict：’A’，
              template:
              replace:Boolean,
              templateUrl:
              scope:Boolean或{}，
              priority:
              transclude：Boolean或字符串element，
              controller:
              controllerAs:
              required:ngModel//驼峰式命名
       }
});

这个指令返回的是一个配置对象

配置对象参数：

（1）restrict这个参数可以理解为如何显示这个指令，驼峰式命名完后再页面显示要用破折号连接

       “A”表示以属性方式显示<div my-directive ></div>

       “E”表示以标签名的方式显示<my-directive></ my-directive>

       “C”表示以类名的方式显示<div class=”my-directive” ></div>

       “M”表示以注释的形式显示<!—directive:my-directive-->

（2）template      这个属性可以是字符串，也可以是一个函数

       如果是字符串，则将字符串的内容显示在视图中的标签位置

（3）templateUrl 这个参数url中的内容显示在视图中的标签位置

（4）replace 这个参数是一个布尔值，如果值为true，会替换directive指向的元素;为false时将directive的内容（即template的内容）作为子元素插入到directive指向的元素。默认为false。

（5）scope

false：表示继承父作用域

true：表示继承父作用域，并创建自己的作用域

{}：表示只创建自己的作用域

 

用ng-controller指令说一下$scope的继承机制：ng-controller可以从父级作用域中继承并创建自己的作用域

<div ng-app=”myapp” ng-init=”aaa=’parent’ ”>
    p:{{aaa}//输出parent
    <div ng-controller=“myCtrl”>
       p:{{aaa}}//输出child
    </div>
</div>

js部分：

angular.module(“myapp”,[]).controller(“myCtrl”,function($scope){
       $scope.aaa=”child”;
});

当scope的值为{}时，将无法获取父作用域中的值，需要用一些方法让隔离作用域（即自己的额作用域）读取父级作用域的属性——绑定策略

① @——单向文本绑定

②“=”——双向绑定

③“&”——调用父级作用域中的函数（是父级作用域中的额同名函数）

上面上个方法的具体操作和原理有待进一步加强

 

（6）transclude：Boolean或者字符串element，默认值为false

提取包含在指令那个元素里面的内容，再把它放置到模板的指定位置。指定位置将用ng-transclude来指明。

（7）controller：这个指令由哪一个控制器来处理

（8）controllerUrl：控制器的url

（9）required：字符串或数组，字符串表示另一个指令的名字，equire会将控制器注入到其值所指定的指令中，并作为link函数的第四个参数

 required的值前面加上某个前缀，会改变查找控制器的行为

①没有前缀，指令会在自身提供的控制器中进行查找，如果找不到任何控制器，则抛出一个error

②？——若在当前指令中没有找到所需的控制器，则会将null传给link函数的第4个参数

③^ ——若在当前指令中没有找到所需的控制器，则查找父元素的额控制器

④?^——如果在当前指令和父元素中都找不到所需的控制器，则将null转给link函数的第4个参数。

 

例子：

Angular.directive(“myDirective”,functioin(){       
// myDirective是我这个自定义指令的名字,使用驼峰式命名
       return {
              restrict：’A’，
              required:ngModel
       }
});
<div my-directive ng-model=”object”></div>——指令会在本地作用域查找ng-model