angular directive 入门



angular directive 入门

"控制器应该尽可能保持短小精悍，而在控制器中进行DOM操作和数据操作则是一个不好的实践。"

"设计良好的应用会将复杂的逻辑放到指令和服务中。通过使用指令和服务，我们可以将控制器重构成一个轻量且更易维护的形式" 

                                                                                                                     《AngularJs权威教程》

Hello Directive

是的，创建一个指令就是这么简单，但是仅仅如此可是不行的，比如：如何让指令的html更丰富呢，如何让指令也能进行数据绑定呢，如何向指令中传递参数、方法呢，是否可以指令嵌套指令呢...请继续往后看

Directive结构分析

restrict:属性名称，取"EACM"中的任意一个或多个字母，它是用来限制指令的声明格式

 E element 元素名称

 A attribute 属性

 C class 类名

 M 注释

template:'指令的内容(html代码)'

template:'
{{name}}
'
app.directive("myStudent",function(){
            return {
                restrict:"EA",
                template:"
{{name}}
",
                controller:function($scope){
                    $scope.name="CONST_Q"
                }
            }
        })

templateUrl:'指令的内容(引用html文件内容作为指令内容)'

    
您好 {{name}}

app.directive("myStudent",function(){
            return {
                restrict:"EA",
                templateUrl:"child1.html",
                controller:function($scope){
                    $scope.name="CONST_Q"
                }
            }
        })

controller:指令的控制器，可以是自己的，也可以继承其他的

    

        
Hello {{name}}
    
    
    

或

app.directive("myStudent",function(){
            return {
                restrict:"EA",
                templateUrl:"child1.html",
                controller:'myCtrl'
            }
        })

scope:指令的作用域对象,当你写上这个属性时，就表示这个directive不会从他的controller里承$scope对象，而是会重新创建一个。（封闭自定义的scope,希望自己的directive用在多处,一共三种状态形式）

 @:外部scope赋值不影响scope的变量

    
您好 {{name2}}
    修改用户名

    
    
    


    

        
Hello {{name1}}
        Update Name
    
    

    

 =:外部scope赋值会影响封闭scope变量

scope:{
    name2:'=name3'
},

 &:允许外部scope传递一个函数、方法给封闭scope

  传递无参函数（需要注意变量的命名规则和书写规则--骆驼峰）

    
您好 {{name2}}
    修改用户名

    
    
    


    

        
Hello {{name1}}
        Update Name
    
    

    

  传递有参函数

    
您好 {{name2}}
    修改用户名

    

        
Hello {{name1}}
        Update Name
    
    

    

link:可以理解为directive被angular编译后执行的方法，指令的dom操作就可以写在这里面

 link:function(scope,element,attrs,ctrl){

  //scope 基本就是上面写到的scope

  //element 简单的就是指令html的dom，可用于dom操作,类似$('xxx')

  //attrs 是个map对象，内容就是指令上所有的属性

  例：

  即attrs={name:'name'}

 }

replace:是否替换掉自定义的指令,　默认是false

 可切换true/false,然后打开浏览器的开发者模式查看elements对比效果

 transclude:指令中可以加入其它的html内容(可用于指令的嵌套)

注：如有写的不好的地方，望指出，相互学习