AngularJS常见内置指令以及控制器

最新推荐文章于 2018-12-11 22:47:34 发布

静默不语

最新推荐文章于 2018-12-11 22:47:34 发布

阅读量908

点赞数 1

分类专栏： AnjularJS

本文链接：https://blog.csdn.net/CSDN_zrz/article/details/71099751

版权

AnjularJS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

AngularJS常见内置指令

(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版本以前控制器的定义，是直接通过全局函数来实现的

控制器：全局控制器
function ctrl($scope) {
$scope.name = "tom";//挂载数据
}
全局控制器的意思，是可以在网页中任意地方通过ng-controller进行注册，全局控制器造成了全局数据污染~！所以Angular在1.2版本以后进行了彻底修改，废弃了全局控制器~ 而是提倡使用挂载在模块下的局部控制器！来更好的控制数据！

渲染指令：

指令的作用就是将数据，渲染展示到页面上【底层是封装了DOM操作】
ng-repeat 循环渲染指令
ng-bind 变量渲染指令，mustache语法的替代写法
ng-repeat循环渲染指令，属性直接写在要循环的标签上！
u in users u和users就会被Angular解释成变量，获取变量中的值进行处理
扩展：实际项目开发中，对于用户编号、商品编号等等各种编号，通常使用字符串来进行编号，所以使用字符串来表示各种编号，并且编号能在程序中保证编号的唯一性
ng-bind
ng-bind-html这个指令，类似于原生JS的innerHTML，但是使用的时候一定要慎重，对于它修饰的内容，必须确保安全性，如果内容的来源不确定，不要使用编译html标签的属性或者函数>>>XSS攻击
ng-include 包含页面指令，类似于JQuery 中的load()函数，用于加载其他页面，Angular应用~~对于属性值，会被解析成变量

节点指令：

主要用于标签、样式、属性、内容的操作
ng-show VS ng-hide 用于显示或者隐藏元素的指令
ng-if指令：用于判断输出，会将DOM元素在DOM树上显示或者移除
ng-class指令： {样式名称:布尔类型}
ng-style样式，主要用于自定义指令的时候进行样式的处理，常规使用方式和行内样式没有什么大区别
ng-src:用于在Angular应用中替代img标签的src属性
ng-href:用于在Angular应用中替代a标签的href属性

事件指令：

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

Angular控制器

(1) 控制器：Angular中用于进行数据逻辑处理和操作的一个模块
(2)通过controller()函数进行注册
(3) 控制器中的参数$scope，这个参数不需要赋值，angular会自动给$scope参数传递一个数据进行使用

(4)控制器：主要用来通过$scope挂载数据、挂载处理函数

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>


</body>
<div ng-controller="myCtrl">
    Mustache:{{name}}**--{{param}}--**
    ng-bind: <span ng-bind="name"></span>
</div>
<hr>
<div ng-controller="myCtrl2">
    Mustache:{{name}}**--{{param}}--**
    ng-bind: <span ng-bind="name"></span>
    <button ng-click="test()">clickMe test()</button>
    <button ng-click="testFn()">clickMe testFn()</button>
</div>


<script>
    var app = angular.module("myApp", []);


    app.controller("myCtrl", function($scope) {
        // 通过$scope挂载变量
        $scope.name = "jerry";
    });


    app.controller("myCtrl2", function($scope) {
        $scope.name = "tom";


        $scope.testFn = function() {
            alert("用户点击了按钮...");
        }
    });


    /* 常规定义的普通变量和函数 */
    var param = "hello!";
    function test() {
        alert("用户点击......");
    }
</script>
</html>

静默不语

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS常见内置指令以及控制器

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

扫一扫