美文网首页
angularJs指令

angularJs指令

作者: 德德de_前端攻城狮 | 来源:发表于2017-10-20 17:51 被阅读0次

指令是扩展的Html'属性,带有前缀ng

ng-app指令用来初始化一个angular应用程序

ng-init用来初始化应用程序数据

ng-repeat指令重复一个html元素 

ng-options指令创建选择框

使用ng-options通过对象和数组循环输出来创建一个下拉框。举例如下:

<select ng-options="x.name for x in names"></select>

也可以使用ng-repeat通过数组循环Html代码来创建下拉列表。举例如下:

<select>

      <option ng-repeat="x in names">{{x.name}}</option>

</select>

ng-options与ng-repeat的区别,ng-options的选项是一个对象,而ng-repeat是一个字符串他有局限性,从这点可以看出来ng-options更适合创建下拉列表。

ng-model指令绑定Html元素到应用程序数据。也可以:为应用程序数据提供类型验证(munber,email,required);为应用程序数据提供状态(invalid,dirty,touched,error);为Html元素提供css类;绑定Html元素到Html表单

自定义指令

angularJs除了内置指令外还可以通过.directive函数来创建自定义指令,

要调用自定义指令Html元素要加上自定义指令名。

使用驼峰命名法命名一个指令,runoobDirective,使用时要用‘-’分割runoob-directive

<body ng-app="myApp">

<runoob-directive></runoob-directive>

</body>

<script>

var app=angular.moudle("myApp",[]);

app.directive("runoobDirective",function(){

       return{

               restrict:“A”      //设置该指令只能通过属性的方式来调用

               template:"<h1>自定义指令</h1>"

       }

})

</script>

自定义指令可以通过使用元素名、属性、类名、注释来调用指令,如下:

<runoob-directive></runoob-directive>

<div runoob-directive></div>

<div class="runoob-directive"></div>

<!--directive:runoob-directive-->

通过设置restrict来设置通过哪种方法来调用,可以是以下几种值:

E 作为元素名使用 、 A作为属性名使用 、 C作为类名来使用、M作为注释来使用。 restrict默认值为“EA”,可以通过元素名和属性名来直接调用

相关文章

  • Angular相关指令

    AngularJS 指令 本教程用到的 AngularJS 指令 : 指令 描述 ng-app 定义应...

  • AngularJS 参考手册

    AngularJS 指令 本教程用到的 AngularJS 指令 : 过滤器解析 AngularJs 过滤器。 A...

  • AngularJS (2)

    AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。 ng-app 指令...

  • AngularJS 指令

    AngularJS 指令 背景 什么是AngularJS指令? 一、内置指令 二、自定义 概念 模块对象app,提...

  • AngularJS使用

    AngularJS实现MVC AngularJS模块化Module AngularJS指令系统 AngularJS...

  • Angular基础学习-01

    本节包括:AngularJS表达式、AngularJS指令、AngularJS模型、AngularJS的Scope...

  • 15. Angular的内置指令(过滤器)

    AngularJS中自定义指令处理 以ng开头的指令都是内置指令。 内置指令是AngularJS已经处理,使用内置...

  • Angular

    AngularJS 通过 ng-directives(指令)扩展了HTML AngularJS 通过内置的指令来为...

  • AngularJS 参考手册

    作者:Zyao89;转载请保留此行,谢谢; AngularJS 指令 AngularJS 事件 AngularJS...

  • AngularJS指令-基础

    简介 AngularJS 通过被称为 指令 的新属性来扩展 HTML。AngularJS 通过内置的指令来为应用添...

网友评论

      本文标题:angularJs指令

      本文链接:https://www.haomeiwen.com/subject/loevuxtx.html