AngularJs-指令<ng-**>

来源：互联网发布：设计师用的软件编辑：程序博客网时间：2024/05/23 01:23

什么是AngularJs的指令？

扩展了HTML的基本功能，通过额外的标签、属性来增强HTML功能
Angular的指令在页面中体现出来就是一个标签\属性\class名称\注释等等。

常规的指令：

1.控制指令，用于ANGULAR应用程序加载流程控制
2.渲染指令，用于ANGULAR将数据在网页中进行展示/隐藏处理
3.节点指令，用于ANGULAR对标签、属性、样式、内容进行处理的指令、
4.事件指令，用于处理常规事件操作的指令
5.其他指令...

控制指令：

ng-app

用于定义Angular应用入口的指令，用于[自动引导]Angular程序的运行
在定义应用程序运行入口的同时，可以绑定一个DOM元素
DOM元素的开始标签和结束标签之间~就可以认为是模块的作用范围

Angular通过ng-app指令，实现自动引导程序运行，底层是通过
bootstrap()进行模块DOM元素加载，开始运行！

ng-app 没有模块，可以引导Angular运行吗？
<html ng-app>
// angular引用可以运行吗？可以运行
Angular会将页面中出现的支持的语法进行解释运行！
>>但是不能使用模块控制器中定义的/挂载的数据，超出了作用范围！
ng-app="模块名称"
该模块就会作为Angular的根模块出现，整个作用范围中，页面View和数据Model可以进行无缝交互！

ng-controller

模块中，可以给模块挂载一个或者多个控制器
挂载好的控制器在当前模块范围内，可以通过ng-controller指令来指定控制器的作用范围

目前常规控制器的做法：
先声明模块
模块下挂载控制器>>> 控制器的作用范围仅限于当前模块！>>>局部控制器
Angular1.2版本以前
控制器的定义，是直接通过全局函数来实现的

渲染指令：

指令的作用就是将数据，渲染展示到页面上【底层是封装了DOM操作】

ng-repeat

循环渲染指令

ng-bind

变量渲染指令，mustache语法的替代写法

参考代码：

html部分：

 <ul>       <li ng-repeat="u in users">            <span ng-bind="$index+1"></span              >****            <span ng-bind="$first"></span>            <span ng-bind="$last"></span>            <span ng-bind="$middle"></span>            <span ng-bind="$even"></span>            <span ng-bind="$odd"></span>            <span ng-bind="u.userID"></span>            <span ng-bind="u.username"></spa             n>            <span ng-bind="u.nickname"></spa             n>        </li>    </ul>

js部分：

<script>    var app = angular.module("myApp", ['ngSanitize']);    app.controller("myCtrl", ["$scope", function ($scope) {        $scope.users = [            {userID: 10001, username: "cat", nickname: "tom"},            {userID: 10002, username: "mouse", nickname: "jerry"},            {userID: 10003, username: "mouse", nickname: "shuke"},            {userID: 10004, username: "mouse", nickname: "beita"}        ];        $scope.content = "<p>这是一段内容</p>";    }]);</script>

节点指令：

节点指令：主要用于标签、样式、属性、内容的操作

ng-switch **> switch()
ng-switch-when **> case:
ng-switch-default **> default 通过flag为true/false来指定使用样式default/sky

ng-if**>if 会将DOM元素在DOM树上显示或者移除

ng-class**>class 样式名称:布尔类型

ng-style 主要用于自定义指令的时候进行样式的处理,常规使用方式和行内样式没有什么大区别

ng-src 用于在Angular应用中替代img标签的src属性

ng-href 用于在Angular应用中替代a标签的href属性

事件指令：

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></body>

0 0