您的位置:首页 > Web前端 > AngularJS

angular指令

2017-04-24 15:08 106 查看


在视图上面怎么去获取模型上面的数据:使用angular指令

angular 的指令都是ng-开头,angluar 后期方便去查找。

angular常用指令:

           1:  ng-app    用来定义一个应用的边界

            2:  ng-controller  用来将控制器跟视图进行关联

            3: ng-show 用来控制当前元素是否显示

            4: ng-hide 用来控制当前元素是否隐藏

            5:  ng-if 空来控制是否出现当前元素

            6:  ng-class 给当前元素添加一个样式

           7:  ng-disabled  控制当前元素是否禁用

            8:  ng-checked  控制当前元素是否选中

            9:  ng-selected  控制当前元素是否选中

            10: ng-readonly   控制当前元素是否只读

            11: ng-include 去包含一个新的模板,放在当前元素里面

            12:ng-bind 用来将模型上面的数据获取视图上面

            13:ng-cloak 用来解决闪烁问题

            14: ng-src    给当前元素添加一个src 属性。对应的值 是一个字符串,路径

            15:ng-href   给当前元素添加一个href 属性。相当于是我们页面上的href 属性

            16: ng-repeat 迭代数组

            17:ng-init 初始化数据  ng-init="username='zhangsan',age=11"

            18:ng-switch  根据表达式显示或隐藏对应的部分

                   ng-switch-when    如果匹配选中选择显示,其他为匹配的则移除

                   ng-switch-defalut   设置默认选项,如果都没有匹配的情况,默认选项会显示

            19: ng-model 将视图的数据流向到模型.


自定义指令:directive()

    规则:1.指令要遵守驼峰命名法则
                2.返回的是一个对象

directive()方法

两个参数:1.指令的名称

                  2.指令的行为,逻辑,函数

App.directive("myHello",function(){
return{
restrict:"ECMA",
replace:true,//替换原来的标签
template:"<h1>hello world</h1>"
}
});


restrict : 条约,限制,用来定义指令的类型

      E:element,元素,这个指令可以通过标签的方式就可以使用这个指令

      C: class,标签里的类名

      M: mark,通过注释的方式去使用

<!--directive:hello-->//通过注释的方式来使用这个指令,前面必须添加directive

     A : attribute

replace :替换,是否替换原有标签 

template:里面的内容必须使用标签去包含起来、
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  angular angular指令