1.今天完成的事情

1.使用filereader完成图片预览，写下面的图片信息的时候遇到了不知道如何传出值的问题，使用原生写的，双向绑定的ng-model在里面失效了，于是偷了波华飒的师，用 $scope.$apply，但是刚开始使用的时候是将这个作为一个函数，包裹onchange里面的代码块，由于是先执行apply，抛出双向绑定的值，再执行代码块中的东西，导致第一次上传图片不生效，点击第二次上传才会抛出双向绑定的值，后来直接将$scope.$apply写到最后面就好了。

2.完成显示图片信息的表单，卡在progress显示上传进度上了，实时需要计算value值，打算明天使用filereader里面的onprogress。稍微看了下formdata，感觉不是很难，预计明天上午可以实现功能，下午花点时间研究下写成指令。

3.下午将昨天讲的ppt上传到了微信。

2.明天要做的事情

完成任务9

3.遇到的问题

如上2个问题

1.apply对作用域有什么影响？

2.progress的value要如何实时计算？

4.收获

研究了一波filereader。PPT内容如下。

【成都-第九十一期】angular 指令

1.背景介绍

AngularJS 通过被称为 指令 的新属性来扩展 HTML。AngularJS 通过内置的指令来为应用添加功能。AngularJS 允许你自定义指令。

2.知识剖析

 angular指令分为：内置指令 && 自定义指令。

  内置指令：AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-

  自定义指令：除了 AngularJS 内置的指令外，我们还可以创建自定义指令。你可以使用 .directive 函数来添加自定义的指令。要调用自定义指令，HTML 元素上需要添加自定义指令名。

内置指令

ngular自带的指令，共有60个左右。

ngularJS提供了一系列内置指令。其中一些指令重载了原生的HTML元素，比如 form 和 a 标签，当在HTML中使用标签时，并不一定能明确看出是否在使用指令。例如，  form 标签被从底层扩展了一系列高级功能，包括表单验证等，原生HTML表单并不会提供这些功能。其他内置指令通常以ng为前缀，很容易识别。所有以ng前缀开头作为命名空间的指令都是AngularJS提供的内置指令，因此不要把你自己开发的指令以这个前缀命名。

由于内置指令较多，本次只演示常用的几个内置指令。更多请参考

完整的angular API中文手册：http://www.angularjsapi.cn/#/form

常用的内置指令：

ng-app: 使用该指令自动启动一个AngularJS应用。ng-app指令指定的应用程序的根元素，通常放置在网页的根元素如body或html 标签。 

ng-controller:定义应用的控制器对象。

ng-class： 指定 HTML 元素使用的 CSS 类 

ng-click： 定义元素被点击时的行为 

ng-model: 绑定 HTML 控制器的值到应用数据 

ng-bind: 绑定 HTML 元素到应用程序数据 

ng-repeat:  定义集合中每项数据的模板 

可以去ppt中查看demo。

自定义指令

过AngularJS模块API中的.directive()方法，我们可以通过传入一个字符串和一个函数来注册一个新指令。其中字符串是这个指令的名字，指令名应该是驼峰命名风格的，函数应该返回一个对象,包含了用来定义和配置指令所需的方法和属性。

            <pre>

                <code>

                    <demo-one></demo-one>

                </code>

                <code>

                angular.module("myApp", [])

                    .controller('demoCtrl',function ($scope) {

                        $scope.aa='as111111'

                    })

                    .directive('demoOne',function () {

                        return{

                            restrict:"AECM",

                            template:'<input type="text" ng-model="aa">',

                            replace: true,

                            scope:{},

                            controller:['$scope',function ($scope) {

                                $scope.aa='ss1212'

                            }]

                        }

                })

                </code>

            </pre>

restrict属性有4个值元素（E） 、属性（A） 、类（C）或注释（M）用以制定格式来调用，可以有不止一种格式，比如 restrict: 'EAC'。

replace的值决定它的模板是嵌套入标签中还是取而代之，若replace值为true，则显示的为

                        <a href="http://google.com">Click me to go to Google</a>

否则默认情况下， AngularJS将模板生成的HTML代码嵌套在自定义标签内部。

                        <my-directive>

                            <a href="http://google.com">Click me to go to Google</a>

                        </my-directive>

scope参数是自定义指令中比较重要的一个参数，一共有3个属性值：true && false && {}

第一种情况:scope:true

继承父作用域，并且新建独立作用域

第二种情况:scope:false

共享父作用域 

第三种情况:scope:{}

不继承父作用域，创建新的独立作用域

3.常见问题

指令的优先级

ng-if和ng-show之间的区别

4.解决方案

优先级参数可以被设置为一个数值。大多数指令会忽略这个参数，使用默认值0，但也有些 场景设置高优先级是非常重要甚至是必须的。例如， ngRepeat将这个参数设置为1000，这样就可 以保证在同一元素上，它总是在其他指令之前被调用。

如果一个元素上具有两个优先级相同的指令，声明在前面的那个会被优先调用。如果其中一 个的优先级更高，则不管声明的顺序如何都会被优先调用：具有更高优先级的指令总是优先运行。

5.编码实战

6.扩展思考
自定义指令中，作用域之间的数据交互是怎么样的？

修饰符'@' '=' '&'的用法

”＝“：指令中的属性取值为controller中相应$scope上属性的取值，可用于双向数据的绑定 

”@“：指令中的取值为html中的字面量/直接量；建立一个local scope property到DOM属性的绑定。

”&“：指令中的取值为Contoller中相应$scope上的属性。可是这属性必须为一个函数回调

7.参考文献

ngular权威教程pdf

angular中文社区

AngularJS指令参数详解

8.更多讨论

自定义指令中的link和compile之间的区别。

鸣谢

感谢大家观看

BY :李维文| 翟金超 | 杨泽平