1.背景介绍

自定义指令

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

                
                    
                
                
                angular.module("myApp", [])
                    .controller('demoCtrl',function ($scope) {
                        $scope.aa='as111111'
                    })
                    .directive('demoOne',function () {
                        return{
                            restrict:"AECM",
                            template:'',
                            replace: true,
                            scope:{},
                            controller:['$scope',function ($scope) {
                                $scope.aa='ss1212'
                            }]
                        }
                })
                
            

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

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

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

3.常见问题

4.解决方案

指令的优先级

优先级参数可以被设置为一个数值。大多数指令会忽略这个参数，使用默认值0，但也有些 场景设置高优先级是非常重要甚至是必须的。例如， ngRepeat将这个参数设置为1000，这样就可 以保证在同一元素上，它总是在其他指令之前被调用。 如果一个元素上具有两个优先级相同的指令，声明在前面的那个会被优先调用。如果其中一 个的优先级更高，则不管声明的顺序如何都会被优先调用：具有更高优先级的指令总是优先运行。

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

angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。 当赋值给ng-show指令的值为false时元素会被隐藏，值为true时元素会显示。ng-hide功能类似，使用方式相反。元素的显示或隐藏是通过改变CSS的display属性值来实现的。

ng-if指令可以根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除， 否则生成一个新的元素插入DOM中。ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是删除或者新增结点。

6.扩展思考