AngularJs1学习笔记:指令

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

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

ng-app

指令初始化一个 AngularJS 应用程序。,标记AngularJs的范围,这个范围内AngularJs可以识别。一般放在html标签里,整个html一个就好,多了也只是第一个有作用,值一般不要为空。

AngularJs1学习笔记:指令_第1张图片

ng-init

指令初始化应用程序数据,基本写法就是ng-init=”xxx=’xxx’”,有多个元素的时候,以”;”间隔

<div ng-init="name='HAHA';age='100'">
  <p>姓名:{{name}},年龄:{{age}}p>
  
div>

ng-model

指令把元素值(比如输入域的值)绑定到应用程序。

<div ng-init="name='HAHA';age='100'">
  <p>姓名:{{name}},年龄:{{age}}p>
  <input ng-model="name">input>
div>

AngularJs1学习笔记:指令_第2张图片

ng-bind

这个指令也是用来绑定数据。


<div ng-init="name='HAHHA'">
  <p ng-bind="name">p>
div>

ng-model是用于表单元素的,支持双向绑定。对普通元素无效;
ng-bind用于普通元素,不能用于表单元素
当ng-bind和{{}}同时使用时,ng-bind绑定的值覆盖该元素的内容。

<div ng-init="name='HAHHA';age='122'">
  <p ng-bind="age">{{name}}p>
div>
这个最后只会显示122

ng-repeat

指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。看一下列子。
AngularJs1学习笔记:指令_第3张图片
从图上可以看出,是创建了2个ul,然后数据显示在li上,可以加个背景颜色看一下
AngularJs1学习笔记:指令_第4张图片

html:


<div ng-controller="MainController">

  <ul ng-repeat="m in emails">
    <li>{{$index+1}}:li>
    <li>{{m.id}}li>
    <li>{{m.name}}li>
    <li>{{m.message}}li>
  ul>

div>

js

 //邮件
  var messages=[{
    id:100,
    name:"哈哈哈",
    message:"今天星期五啊,明天不上班。"
  },{
    id:300,
    name:"猪八戒",
    message:"约了师兄逛公园"
  }];
  app.controller('MainController',function($scope){
    console.log(messages);
    $scope.emails =messages;
  });

自定义指令

  app.directive('myDirective',function(){
    return{
      template:"

这是一个自定义指令

"
} });

使用的时候可以这样的使用,会输出 这是一个自定义指令

<my-directive>my-directive>

有关指令的使用有多种方法,具体通过restrict 的值来判断

 app.directive('myDirective',function(){
    return{
      restrict : "E",//元素名使用
      template:"

这是一个自定义指令

"
} });

1.作为元素名使用


 restrict : "E",//元素名使用
<my-directive></my-directive>

2.作为属性使用

 restrict : "A",//属性使用
<div my-directive>div>

3.作为类名使用

 restrict : "C",//类名使用
<div class="my-directive">div>

4.作为注释使用

 restrict : "M",//作为注释名使用
  replace : true//这个要加上否则注释使用没效果

指令的名称是区分大小写的。大家可以试试指令名称是myDDirective的时候用什么方式才会有效。

以上,不对的地方请指出谢谢

你可能感兴趣的:(AngularJS相关)