当前位置:   article > 正文

Angular入门04: 指令_angular中的指令是什么?

angular中的指令是什么?

一、指令概述

1.1 什么是指令?
  • AngularJS 通过被称为 指令 的新属性来扩展
  • HTML。 AngularJS 通过内置的指令来为应用添加功能。
  • AngularJS 允许你自定义指令。
1.2 指令特征

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

二、 常用指令

2.1 ng-app 应用注册

ng-app初始化angular应用,元素是 AngularJS 应用程序 的”所有者”
通过将 ng-app写在html标签上,用于在全文档中进行注册

ng-app的值对应于用angular.module(“appName”,[])注册的appName的值

<html ng-app="app">
  • 1
2.2 ng-controller 绑定控制器(作用域)

在angular中数据与视图的关系是通过Scope进行连接的,
可以说angular是一个MVVM框架,M代表Model层(后台提供到前台的数据),V代表View层(html页面视图),VM代表ViewModel即为这里的$scope对象,VM的作用就在于与Model和View建立双向联系,在M和V之间起到连接作用,当其中一方发生变化时就即时的通知到另一方并作出改变。

angular.module("app",[]).controller("myCtrl",function($scope){
    $scope.name="张三"
})
  • 1
  • 2
  • 3

在视图中:

<div ng-controller="myCtrl">
    {{name}} 
    <!--张三--> 
</div>
  • 1
  • 2
  • 3
  • 4
2.3 ng-model 数据绑定

ng-model 指令可以将输入域的值与 AngularJS 创建的变量$scope绑定。
ng-model的职责:
1、绑定视图到模型,如 input, textarea或select (这三个都有一个特性:value值,而ng-model则将数据与value进行了绑定。)等指令。
2、提供验证操作 (如必输、数字、email、url)。 根据H5的一些新属性如require
3、维护控件的状态 (有效valid/无效invalid, 有改动dirty/无改动pristine, 触摸过touched/未触摸untouched, 验证错误等)。
4、设置元素上相关的css类 (ng-valid, ng-invalid, ng-dirty(修改过的), ng-pristine(没修改过的;原始状态的), ng-touched, ng-untouched) ,包括动画
5、注册控件到父 表单。
注意:在表单中,angular会自动的根据属性设置的不同,为表单元素添加class类名:(ng-valid, ng-invalid, ng-dirty(修改过的), ng-pristine(没修改过的;原始状态的), ng-touched, ng-untouched) ,因此,我们可能通过这些类名来对表单验证的合法与不合法样式进行设置
实例:angular的表单验证(只验证是否填写)

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        form .ng-invalid{
            border:1px solid red;
        }
    </style>
</head>
<body ng-controller="myCtrl">
<form>
    <div>
        <label for="username">姓名</label>
        <input type="text" id="username" name="username" ng-model="user.name" required>
    </div>
    <div>
        <label for="pwd">密码</label>
        <input type="text" id="pwd" name="pwd" ng-model="user.pwd" required ng-pattern="/a-z/">
    </div>
    <button ng-click="validate()">确认</button>
</form>
    <script src="../vendor/angular.min.js"></script>
    <script src="index.js"></script>
    <script src="controller.js"></script>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

如上:在input元素上绑定了ng-pattern指令用于正则验证输入的是否为字母。通过查看Element可以知道,input元素会被自动添加class样式,我们可以通过ng-invalide类来控制不合法的样式显示

2.4 ng-show, ng-hide显示与隐藏

ng-show和ng-hide根据表达式的值来显示或隐藏HTML元素。
ng-show=true/false
1)、当为true时,对应元素显示,为false时,对应元素隐藏

当赋值给ng-show指令的值为false时元素会被隐藏。类似地,当赋值给ng-hide指令的值为true时元素也会被隐藏。
原理: 元素的显示或隐藏是通过移除或添加ng-hide这个CSS类来实现的。
这里写图片描述

2.5 ng-if 是否生成或移除元素

使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false,那对应的元素将会从DOM中移除,否则对应元素的一个克隆将被重新插入DOM中。
注意:它和ng-show的区别:show是通过ng-hide这个css类来控制显示和隐藏,而if是控制生成还是移除元素

<div ng-if="isShow">
    <img src="{{imgsrc}}" />
</div>
  • 1
  • 2
  • 3
2.6 ng-href 替代原生href属性

使用当前作用域中的属性动态创建URL时,应该用ng-href代替href。

href的潜在问题 是当用户点击一个由插值动态生成的链接时,如果插值尚未生效,将会跳转到错误的页面(通常是404),所以使用ng-href。(Vue中通过v-bind:href或者简写形式 :href来绑定属性)

<div>
   <a ng-href="{{aLink}}">百度</a>
</div>
<script src="../vendor/angular.min.js"></script>
<script>
   angular.module('app',[]).controller("myCtrl",function($scope){
       $scope.aLink="http://www.baidu.com"
   })
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
2.7 ng-src指令

与ng-href类似,为了保证图片的加载生效,使用ng-src来代替原src属性。确保在ng-src对应的表达式生效之前不要加载图像。

2.8 ng-repeat 遍历

ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素都会被赋予自己的模板和作用域。

同时每个模板实例的作用域中都会暴露一些特殊的属性。

  • $index:遍历的进度(0…length-1)。索引
  • $first:当元素是遍历的第一个时值为true。
  • $middle:当元素处于第一个和最后元素之间时值为true。
  • $last:当元素是遍历的最后一个时值为true。
  • $even:当$index值是偶数时值为true。
  • $odd:当$index值是奇数时值为true。

三、自定义指令 directive()

除使用angular内置的指令外,我们还可以创建自定义指令。
使用方法:
directive(“指令名”,fn)
指令定义的核心就是function中的return {}。
参数一: 指令名称 name
参数二: 指令工厂函数()构造器,返回配置项;
实例:

<div>
        <a ng-href="{{aLink}}">百度</a>
        <hello-world />
    </div>
    <script src="../vendor/angular.min.js"></script>
    <script>
        angular.module('app',[]).controller("myCtrl",function($scope){
            $scope.aLink="http://www.baidu.com"
        }).directive("helloWorld",function(){
            return {
                restrict:"ECMA",
                replace:true,
                template:"<h1>hello world</h1>"
            }

        })
    </script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

注意点:

1) 、自定义指令采用驼峰命名法定义,而在使用时需要用“-”连接单词
2)、return 是自定指令的关键 点所在,返回的对象中包含的属性参数如下:


  • restrcit:
    指令以什么形式呈现,值有E:以标签的形式使用,C:class名的形式,M:commet注释的形式,A:attribute属性的形式
  • replace:true/false :替换标签,默认为
    false,就是将模版的内容追加到元素中。为true时会替换使用此指令的位置,而直接显示模板

  • template:指令的模板,它的值就是最终生成的内容

  • templateUrl:指令的模版URL地址。引用外部模板!!!
  • templateCache: 用于缓存模板,以便复用。
  • link:可用于操作DOM的一个方法,其有三个参数 :scope,element,Attribute

scope即此指令对应的应用上的作用域$scope,
element:指定所在元素,即要被操作的DOM
attr:属性,用于设置指令使用哪个controller里的数据
两个点:
指令标签上的属性
link方法中调用attrs.howtoload(注意这里有个坑,用驼峰写的属性会被转成小写的,所以在link里全小写)
jQLite: jquery的简化版

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/神奇cpp/article/detail/874472
推荐阅读
  

闽ICP备14008679号