Angular快速入门3--指令

最新推荐文章于 2022-03-10 18:09:00 发布

宋小草

最新推荐文章于 2022-03-10 18:09:00 发布

阅读量294

点赞数

分类专栏： angularjs javascript 前端框架文章标签： angular angularjs

本文链接：https://blog.csdn.net/songchuncao/article/details/70832340

版权

angularjs 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

javascript

6 篇文章 0 订阅

订阅专栏

前端框架

6 篇文章 0 订阅

订阅专栏

Angular指令

1.介绍

AngularJS的指令
指示，命令：指挥示意要做一件事情！
指令：就是扩展了HTML的基本功能，通过额外的标签、属性来增强HTML功能
Angular的指令在页面中体现出来就是一个标签\属性\class名称\注释等等
常见指令，按照指令的功能，划分为五大类
1.控制指令，用于ANGULAR应用程序加载流程控制
2.渲染指令，用于ANGULAR将数据在网页中进行展示/隐藏处理
3.节点指令，用于ANGULAR对标签、属性、样式、内容进行处理的指令、
4.事件指令，用于处理常规事件操作的指令
5.其他指令….

1.1控制指令

控制指令：

ng-app
用于定义Angular应用入口的指令，用于[自动引导]Angular程序的运行
在定义应用程序运行入口的同时，可以绑定一个DOM元素
DOM元素的开始标签和结束标签之间~就可以认为是模块的作用范围
Angular通过ng-app指令，实现自动引导程序运行，底层是通过
bootstrap()进行模块DOM元素加载，开始运行！
ng-app 没有模块，可以引导Angular运行吗？

angular引用可以运行吗？可以运行
Angular会将页面中出现的支持的语法进行解释运行！

但是不能使用模块控制器中定义的/挂载的数据，超出了作用范围！
ng-app=”模块名称”
该模块就会作为Angular的根模块出现，整个作用范围中，页面View和数据Model可以进行无缝交互！
ng-controller
模块中，可以给模块挂载一个或者多个控制器
挂载好的控制器在当前模块范围内，可以通过ng-controller指令来指定控制器的作用范围

目前常规控制器的做法：
先声明模块
模块下挂载控制器>>> 控制器的作用范围仅限于当前模块！>>>局部控制器
Angular1.2版本以前
控制器的定义，是直接通过全局函数来实现的
//控制器：全局控制器
function ctrl( $scope) {$ scope.name = “tom”;//挂载数据
}
全局控制器的意思，是可以在网页中任意地方通过ng-controller进行注册
全局控制器造成了全局数据污染~！所以Angular在1.2版本以后进行了彻底修改
废弃了全局控制器~ 而是提倡使用挂载在模块下的局部控制器！来更好的控制数据！

1.2渲染指令

渲染指令：
指令的作用就是将数据，渲染展示到页面上【底层是封装了DOM操作】
* ng-repeat 循环渲染指令
* ng-bind 变量渲染指令，mustache语法的替代写法
*
1.2.1 ng-repeat循环渲染指令
属性直接写在要循环的标签上！
如<li ng-repeat="u in users"></li>
u in users u和users就会被Angular解释成变量，获取变量中的值进行处理
1.2.2.1 ng-bind
变量渲染指令，mustache语法的替代写法
如<div ng-bind="content"></div>===={{content}}
1.2.2.1 ng-bind-html
这个指令，类似于原生JS的innerHTML
但是使用的时候一定要慎重，对于它修饰的内容，必须确保安全性
如果内容的来源不确定，不要使用编译html标签的属性或者函数>>>XSS攻击

1.3节点指令

节点指令：用于标签、样式、属性、内容的操作
1.3.1 ng-class
ng-class指令： {样式名称:布尔类型}
eg:

<div ng-class="{true:default,false:sky}[flag]">
        </div>
        <input type="checkbox" ng-model="flag">选中{{flag}}
       <!-- 通过flag为true/false来指定使用样式default/sky[使用不多：了解] -->

1.3.2 ng-style
ng-style样式，主要用于自定义指令的时候进行样式的处理
常规使用方式和行内样式没有什么大区别
1.3.3 ng-if
ng-if指令：用于判断输出
ng-if指令，会将DOM元素在DOM树上显示或者移除
1.3.4 ng-show VS ng-hide
用于显示或者隐藏元素的指令

1.4事件指令

事件指令：Angular封装的用于操作事件的指令
通常是ng-[event]来命名指令，如ng-click表示单击事件
Angular中的事件处理，需要将处理函数挂载到对应控制器的$scope上

<body>
    <div ng-controller="myCtrl">
        <button ng-click="fn1()">点击执行</button>
        <button ng-click="fn2($event)">点击执行，附带事件对象$event</button>
        <button ng-click="fn2($event, 'tom')">点击执行，多个参数</button>
    </div>
<script>
    var app = angular.module("myApp", [])
        .controller("myCtrl", ["$scope", function($scope) {
            $scope.fn1 = function() {
                alert("事件执行");
            }
            $scope.fn2 = function(event,name) {
                console.log("事件执行了.", event, name);
            }
        }]);
</script>