Angular入门04：指令

最新推荐文章于 2021-10-09 23:36:11 发布

Sophie_U

最新推荐文章于 2021-10-09 23:36:11 发布

阅读量655

点赞数

分类专栏：初级前端知识文章标签： angular angularjs

本文链接：https://blog.csdn.net/Sophie_U/article/details/54708646

版权

初级前端知识专栏收录该内容

36 篇文章 4 订阅

订阅专栏

一、指令概述

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">

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="张三"
})

在视图中：

<div ng-controller="myCtrl">
    {{name}} 
    <!--张三--> 
</div>

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>

如上：在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>

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>

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）、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的简化版

Sophie_U

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Angular入门04：指令

一、指令概述1.1 什么是指令？AngularJS 通过被称为指令的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。AngularJS 允许你自定义指令。1.2 指令特征 AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-* 。二、常用指令2.1 ng-app 应用注册 ng-app初始化angular应用，元素是 Angula
复制链接

扫一扫