基本的AngularJS指令及控制器

最新推荐文章于 2021-08-28 08:24:34 发布
最新推荐文章于 2021-08-28 08:24:34 发布
阅读量301 收藏
点赞数
文章标签： javascript ui ViewUI
原文链接：https://my.oschina.net/u/3161974/blog/1142976
版权 
<!--<!doctype html>-->
<!--<html ng-app>&lt;!&ndash;通过ng-app指令来启动AngularJS 作用是指定HTML中哪一部分归AngularJS控制&ndash;&gt;-->
<!--<head>-->
<!--<meta charset="utf-8"/>-->
<!--<title>Declarative CSS Animation Demonstration</title>-->
    <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>-->
<!--</head>-->
<!--<body>-->
<!--<h1>Hello {{1 + 2}}</h1>&lt;!&ndash;花括号在AngularJS中表示数据绑定，可能是单向的数据绑定也可能是某个表达式&ndash;&gt;-->
<!--<input type="text" ng-model="name" placeholder="Enter your name">&lt;!&ndash;ng-model指令可以用于输入控件中-->
 <!--当用户想输入数据或者从JavaScript变量中获取值时都可以使用它。此处，我们可以让AngularJS存储用户输入的值并将它传给一个叫做name的变量&ndash;&gt;-->
<!--<h1>Hello <span ng-bind="name"></span></h1>&lt;!&ndash;ng-bind指令可以与花括号表达式互相替换，都是将name变量的值置于标签内，当值发生变化后，绑定的组件也会更新&ndash;&gt;-->
<!--</body>-->
<!--</html>-->

<!--自定义模块-->
<!--<html ng-app="notesApp">-->
<!--<head><title>Hello AngularJS</title></head>-->
<!--<body>-->
<!--Hello {{1+1}}nd time AngularJS-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>-->
<!--<script type="text/javascript">-->
    <!--angular.module('notesApp',[]);&lt;!&ndash;定义了一个模块，然后让AngularJS通过ng-app指令来启动该模块&ndash;&gt;-->
<!--</script>-->
<!--</body>-->
<!--</html>-->

<!--创建自定义控制器-->
<!--AngularJS控制器的主要职责有：
.从服务器获取所需数据 以生成页面UI
.决定哪些数据将会呈现给用户
.一些与页面相关的逻辑，比如如何显示元素，UI中的哪些部分是可见的，它们的风格又是什么样的
.用户交互，比如响应用户单击事件以及验证文本输入框中的值
-->
<!--<html ng-app="notesApp">-->
<!--<head><title>Hello AngularJS</title></head>-->
<!--<body ng-controller="MainCtrl as ctrl">&lt;!&ndash;ng-controller指令可以让AngularJS通过名称创建出控制器实例，然后将它关联到DOM元素上&ndash;&gt;-->
<!--Hello {{ctrl.helloMsg}} AngularJS <br>-->
<!--Hello {{ctrl.goodbyeMsg}} AngularJS-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>-->
<!--<script type="text/javascript">-->
    <!--angular.module('notesApp',[])-->
            <!--.controller('MainCtrl',[function () {-->
                <!--//此处为与控制器相关的代码-->
                <!--this.helloMsg='zhongguo';//通过this关键字定义的那个变量可以在HTML中访问  任何用户想看的信息或者HTML中需要用到的数据，都必须通过this关键字将它定义成控制器实例的成员变量-->
                <!--var goodbyeMsg='meiguo';//局部变量，无法在HTML中访问-->
            <!--}]);-->
    <!--&lt;!&ndash;定义了一个模块，然后让AngularJS通过ng-app指令来启动该模块&ndash;&gt;-->
<!--</script>-->
<!--</body>-->
<!--</html>-->
<!--<html ng-app="notesApp">-->
<!--<head><title>Hello AngularJS</title></head>-->
<!--<body ng-controller="MainCtrl as ctrl">&lt;!&ndash;ng-controller指令可以让AngularJS通过名称创建出控制器实例，然后将它关联到DOM元素上&ndash;&gt;-->
<!--Hello {{ctrl.message}} AngularJS <br>-->
<!--<button ng-click="ctrl.changeMessage()">change message</button>-->
<!--Hello {{ctrl.goodbyeMsg}} AngularJS-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>-->
<!--<script type="text/javascript">-->
    <!--angular.module('notesApp',[])-->
            <!--.controller('MainCtrl',[function () {-->
                <!--//此处为与控制器相关的代码-->
               <!--var self=this;-->
                <!--self.message='hhhh';-->
                <!--self.changeMessage=function () {-->
                    <!--self.message='gggg';-->


                <!--}-->
            <!--}]);-->
    <!--&lt;!&ndash;定义了一个模块，然后让AngularJS通过ng-app指令来启动该模块&ndash;&gt;-->
<!--</script>-->
<!--</body>-->
<!--</html>-->
<!--数组的操作与显示-->
<!--<html ng-app="notesApp">-->
<!--<head><title>Hello AngularJS</title>-->
    <!--<style>-->
        <!--.done{-->
            <!--background-color: green;-->
        <!--}-->
        <!--.pending{-->
            <!--background-color: red;-->
        <!--}-->
    <!--</style>-->
<!--</head>-->
<!--<body ng-controller="MainCtrl as ctrl">&lt;!&ndash;ng-controller指令可以让AngularJS通过名称创建出控制器实例，然后将它关联到DOM元素上&ndash;&gt;-->
<!--<div ng-repeat="note in ctrl.notes" ng-class="ctrl.getNoteClass(note.done)">&lt;!&ndash;ng-repeat 包含ng-repeat指令的那个元素将成为模板，AngularJS加载该模板并产生一份副本，然后对于ng-repeat中的每一个实例都采取相同操作-->
 <!--AnhularJS中该指令能够遍历数组，通过键和值来访问数组中的对象并将它们显示在HTML中-->
 <!--ng-class指令用于选择性地从HTML元素中添加或者删除css class。ng-class的调用方式有很多种，我们将采用定义最明确、最清晰的那种，ng-class-->
 <!--指令可以接收字符串或者对象作为参数。如果参数为字符串，那么直接把它作为css class名称应用到UI中，如果参数是一个对象，那么AngularJS就会-->
 <!--检查该对象的每一个属性以及它对应的值，根据该值是false还是true来决定到底添加还是删除css class。-->
 <!--&ndash;&gt;-->
    <!--<span class="label">{{note.label}}</span>-->
    <!--<span class="assignee" ng-show="note.assignee" ng-bind="note.assignee"></span>&lt;!&ndash;AngularJS中有两条指令用于显示或隐藏HTML元素：ng-show和ng-hide。通过绑定一个布尔型的变量-->
    <!--AngularJS就能控制UI显示与否。在本例中，当note.assignee为true（也可以是非空字符串，非0数字，非空JS对象等）时，assignee所对应的span元素是可见的。当note对象的assingee属性为真时，-->
    <!--我们就能看到它所对应的span-->
    <!--&ndash;&gt;-->
<!--</div>-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>-->
<!--<script type="text/javascript">-->
    <!--angular.module('notesApp',[])-->
            <!--.controller('MainCtrl',[function () {-->
                <!--//此处为与控制器相关的代码-->
                <!--var self=this;-->
                <!--self.notes=[-->
                    <!--{id:1,label:'First Note1',done:false,assignee:'Shyam'},-->
                    <!--{id:2,label:'Second Note2',done:false},-->
                    <!--{id:3,label:'Done Note3',done:true},-->
                    <!--{id:4,label:'Last Note4',done:false,assignee:'Brad'},-->
                <!--];-->
                <!--self.getNoteClass=function (status) {-->
                    <!--return{-->
                        <!--done:status,-->
                        <!--pending:!status-->
                    <!--}-->
                <!--}-->
            <!--}]);-->
    <!--&lt;!&ndash;定义了一个模块，然后让AngularJS通过ng-app指令来启动该模块&ndash;&gt;-->
    <!--&lt;!&ndash;值得注意的是，和ng-class类似，ng-bind、ng-show，以及大部分诸如此类的指令都是既能直接绑定变量也能调用控制器中的函数。我们既可以-->
    <!--直接访问变量也可以将变量作为参数传给函数，这些参数不需要花括号&ndash;&gt;-->
<!--</script>-->
<!--</body>-->
<!--</html>-->
<!--ng-repeat的应用 作用于对象上的ng-repeat
如果ng-repeat指令作用于对象而不是数组之上，该对象所有的属性名将会以大小写敏感的字母顺序排序。详细地说，大写字母在前，然后根据字母前后顺序排列。
ng-repeat指令接受类似"variable in arrayExpression"或者"(key,value) in objectExpression"这些格式的参数。当参数为数组时，数组中的元素
根据定义的先后顺序排列。
-->
<!--<html ng-app="notesApp">-->
<!--<head><title>Notes App</title></head>-->
<!--<body ng-controller="MainCtrl as ctrl">-->
<!--<div ng-repeat="(author,note) in ctrl.notes">-->
    <!--<span class="label">{{note.label}}</span>-->
    <!--<span class="auther" ng-bind="author"></span>-->
<!--</div>-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>-->
<!--<script type="text/javascript">-->
    <!--angular.module('notesApp',[])-->
            <!--.controller('MainCtrl',[function () {-->
                <!--var self=this;-->
                <!--self.notes={-->
                    <!--shyam:{-->
                        <!--id:1,-->
                        <!--label:'First Note',-->
                        <!--done:false-->
                    <!--},-->
                    <!--Misko:{-->
                        <!--id:3,-->
                        <!--label:'Finished Third Note',-->
                        <!--done:true-->
                    <!--},-->
                    <!--brad:{-->
                        <!--id:2,-->
                        <!--label:'Second Note',-->
                        <!--done:false-->
                    <!--}-->
                <!--}-->
            <!--}])-->
<!--</script>-->
<!--</body>-->
<!--</html>-->
<!--ng-repeat中的辅助变量 ng-repeat指令也为HTML模板提供了一些通用的辅助变量来查询当前作用域中的一些常用信息
每一个以‘$’为前缀的变量都是AngularJS内置的，它可以提供当前元素的某些统计信息，包括：
$first、$middle和$last都是布尔类型的变量，对应数组中的当前元素是否是第一个，还是处于中间（既非第一个也不是最后一个），或者是最后一个
$index给出了当前元素的索引值，或者说它处于数组中的第几个。
$odd和$event代表着它的索引值的奇偶性，可以用来在奇偶行上显示不同的元素风格或者其他条件判断。
-->
<!--<html ng-app="notesApp">-->
<!--<head><title>Notes App</title></head>-->
<!--<body ng-controller="MainCtrl as ctrl">-->
<!--<div ng-repeat="note in ctrl.notes">-->
    <!--<div>First Element:{{$first}}</div>-->
    <!--<div>Middle Element:{{$middle}}</div>-->
    <!--<div>Last Element:{{$last}}</div>-->
    <!--<div>Index of Element:{{$index}}</div>-->
    <!--<div>At Even Position:{{$even}}</div>-->
    <!--<div>At Odd Position:{{$odd}}</div>-->
    <!--<span class="label">{{note.label}}</span>-->
    <!--<span class="status" ng-bind="note.done"></span>-->
    <!--<br/><br/>-->
<!--</div>-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>-->
<!--<script type="text/javascript">-->
<!--angular.module('notesApp',[])-->
<!--.controller('MainCtrl',[function () {-->
<!--var self=this;-->
    <!--self.notes=[-->
        <!--{id:1,label:'First Note',done:false},-->
        <!--{id:2,label:'Second Note',done:false},-->
        <!--{id:3,label:'Done Note',done:true},-->
        <!--{id:4,label:'Last Note',done:false},-->
    <!--];-->
<!--}])-->
<!--</script>-->
<!--</body>-->
<!--</html>-->
<!--根据ID判断重复性
当我们单击按钮时，第一个ng-repeat中的hashKey和DOM元素每次都会发生变化，在第二个ng-repeat中，不会计算$$hashkey，因为我们已经明白无误地告诉
AngularJS使用id属性来作为判断重复与否的唯一标识。这样一来，DOM元素可以根据对象的ID属性来进行重用(reuse)。
-->
<!--<html ng-app="notesApp">-->
<!--<head><title>Notes App</title></head>-->
<!--<body ng-controller="MainCtrl as ctrl">-->
<!--<button ng-click="ctrl.changeNotes()">Change Notes</button>-->
<!--<br/>-->
<!--Dom Element change every time someone clicks-->
<!--<div ng-repeat="note in ctrl.notes1">-->
    <!--{{note.$$hashKey}}-->
    <!--<span class="label">{{note.label}}</span>-->
    <!--<span class="author" ng-bind="note.done"></span>-->
<!--</div>-->

<!--<br/>-->

<!--DOM Elements are reused every time someone clicks-->
<!--<div ng-repeat="note in ctrl.notes2 track by note.id">&lt;!&ndash;检查重复性&ndash;&gt;-->
    <!--{{note.$$hashKey}}-->
    <!--<span class="label">{{note.label}}</span>-->
    <!--<span class="author" ng-bind="note.done"></span>-->
<!--</div>-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>-->
<!--<script type="text/javascript">-->
    <!--angular.module('notesApp',[])-->
            <!--.controller('MainCtrl',[function () {-->
                <!--var self=this;-->
                <!--var notes=[-->
                    <!--{-->
                        <!--id:1,-->
                        <!--label:'First Note',-->
                        <!--done:false,-->
                        <!---->
                        <!--someRandom:31431-->
                    <!--},-->
                    <!--{-->
                      <!--id:2,-->
                        <!--label:'Second Note',-->
                        <!--done:false-->
                    <!--},-->
                    <!--{-->
                        <!--id:3,-->
                        <!--label:'Finished Third Note',-->
                        <!--done:true-->
                    <!--}-->
                <!--];-->
                <!--self.notes1=angular.copy(notes);-->
                <!--self.notes2=angular.copy(notes);-->
                <!--self.changeNotes=function () {-->
                    <!--notes=[-->
                        <!--{-->
                            <!--id:1,-->
                            <!--label:'Changed Note',-->
                            <!--done:false,-->
                            <!--someRandom:4242-->
                        <!--},-->
                        <!--{-->
                            <!--id:2,-->
                            <!--label:'Second Note',-->
                            <!--done:false-->
                        <!--},-->
                        <!--{-->
                            <!--id:3,-->
                            <!--label:'Finished Third Note',-->
                            <!--done:true-->
                        <!--}-->
                    <!--];-->
                    <!--self.notes1=angular.copy(notes);-->
                    <!--self.notes2=angular.copy(notes);-->
                <!--}-->
            <!--}])-->
    <!---->
<!--</script>-->
<!--</body>-->
<!--</html>-->
<!--跨HTML元素的ng-repeat-->
<html ng-app="notesApp">
<head><title>Notes App</title></head>
<body ng-controller="MainCtrl as ctrl">

<table>
    <tr ng-repeat-start="note in ctrl.notes">
    <td>{{note.label}}</td>
    </tr>
    <tr ng-repeat-end>
        <td>Done:{{note.done}}</td>
    </tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>
<script type="text/javascript">
    angular.module('notesApp',[])
            .controller('MainCtrl',[function () {
                var self=this;
                var notes=[
                    {
                        id:1,
                        label:'First Note',
                        done:false,
                    },
                    {
                        id:2,
                        label:'Second Note',
                        done:false
                    },
                    {
                        id:3,
                        label:'Finished Third Note',
                        done:true
                    }
                ];
            }]);

</script>
</body>
</html>

转载于:https://my.oschina.net/u/3161974/blog/1142976

chenggou9601
关注
AngularJS-控制器篇(controller)
Drenched的博客
04-28 1万+
今天公司突然停电了，临时回家，哈哈 莫名很兴奋。                                                                 回家里已经把工作做完，今晚上一起看个电影啊  度过愉快的周末~ 说说今天的用的控制器  再出去耍 哈哈哈 控制器 什么是控制器？ 控制器是AngularJS的核心之一，它的作用主要是对视图中的
Angularjs知识点整理(一)之——简介、指令介绍
艾夏SEO
12-10 461
简介 AngularJS 是一个为动态WEB应用设计的结构框架，提供给大家一种新的开发应用方式，这种方式可以让你扩展HTML的语法，以弥补在构建动态WEB应用时静态文本的不足，从而在web应用程序中使用HTML声明动态内容。AngularJS有五个主要核心特性，如下介绍： 双向数据绑定 —— 实现了把model与view完全绑定在一起，model变化，view也变化，反之亦然。模板 —— 在An
详解angularjs中如何实现控制器和指令之间交互
10-19
本篇文章主要介绍了详解angularjs中如何实现控制器和指令之间交互，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
angularjs中如何实现控制器和指令之间交互
高山上的鱼
05-04 9886
如果我们具有下面的DOM结构： 滑动加载 同时我们的控制器具有如下的签名： var myModule = angular.module("MyModule", []); //首先定义一个模块并在模块下挂载控制器，第二个参数为一个数组，其中函数前面的参数都是会被注入到函数形参上面的 myModule.controller('MyCtrl', ['$scope', fu
AngularJs-指令和控制器交互
weixin_30580943的博客
02-08 89
前言： 　　前段时间我们学习了angular的指令，他通过ECMA的方式创建元素，可以让我们共用这些元素，我们也知道可以通过 link的方法给这个指令添加一些动作事件，本节，我们将写入和让angular的指令能和控制器进行交互。 1，指令和控制器的交互 <!DOCTYPE html> <html ng-app="MyController"> <head&...
我所理解的AngularJS指令和控制器的交互原理
u011070165的专栏
03-17 999
AngularJS指令和控制器的交互原理 以AngularJS 指令中的‘@’来做解释。
angularjs指令-控制器
b422761838的专栏
06-25 286
1.指令-控制器.html angularjs指令 <!-- directive调用参数时，需要在scope里面指定，比如template要调用controller里面的name， 则需要先在渲染的span里面定义一个qw-color标签，directive的scope里面定义color取qw-color的name
AngularJS指令与控制器之间的交互功能示例
10-20
###AngularJS指令与控制器交互的基本概念 #### 1. 指令的定义和作用 指令通过定义新的HTML元素或属性来扩展HTML的功能。定义指令时，可以通过restrict属性指定指令适用的范围，比如'E'表示元素，'A'表示属性。指令...
AngularJS实现controller控制器间共享数据的方法示例
01-21
本文实例讲述了AngularJS实现controller控制器间共享数据的方法。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html ng-app=myapp> <head> <title>www.jb51.net 控制器间共享数据</...
AngularJS实现自定义指令与控制器数据交互的方法示例
12-12
本示例将详细介绍如何在AngularJS中创建自定义指令并实现与控制器之间的数据交互。 首先，让我们分析一下提供的代码片段。在HTML中，我们有以下结构： ```html <yy-hello ng-controller='yyHelloController'></...
AngularJS控制指令
sky_lunar_g的博客
04-30 530
AngularJS的指令 控制器在Angularjs中的作用是增强视图，它实际就是一个函数，用来向视图中的作用域添加额外的功能，我们用它来给作用域对象设置初始状态，并添加自定义行为。 当我们在页面上创建一个控制器时，Angularjs会生成并传递一个$scope给这个控制器，由于Angularjs会自动实例化控制器，所以我们只需要写构造函数即可。  常见指令，按照指令
angular控制器、服务和指令三者之间的关系
小红帽的博客
05-20 2273
从总体来看，这三个组件的关系如下所示： 服务负责从远端服务器抓取和存储数据基于服务构建的控制器将为angular的作用域层次提供数据和功能基于服务和控制器构建的指令将直接与文档对象模型（DOM）元素进行交互 因为控制器并未使用依赖注入器进行注册，所以控制器和服务无法将控制器列为依赖 var m = angular.module('myModule'); m.factory('myS
【angularjs】控制器
程金鹏（程利鹏）
01-18 207
AngularJS中ng-app的赋值问题 https://blog.csdn.net/devillittle/article/details/56840892 controller 使用的时候，ng-app 必须有名字，空会报错。 简介： AngularJS 控制器 控制 AngularJS 应用程序的数据。 AngularJS 控制器是常规的 JavaScript 对象。 AngularJ...
AngularJS常见内置指令以及控制器
CSDN_zrz的博客
05-02 942
AngularJS常见内置指令           (1).控制指令，用于ANGULAR应用程序加载流程控制     (2).渲染指令，用于ANGULAR将数据在网页中进行展示/隐藏处理     (3).节点指令，用于ANGULAR对标签、属性、样式、内容进行处理的指令、     (4).事件指令，用于处理常规事件操作的指令     (5).其他指令.... 控制指令： n
Java基础-xml解析
Love&Share
08-28 5031
XML XML 概述 Exendsible Markup Language(XML)可扩展标记语言 用途: 数据存储,小型数据库,存在一定CRUD操作可行性 网络数据的传输 JavaWEB项目配置文件 基本语法 XML文件后缀名为.xml XML文件第一行是对于当前文件的定义声明 XML文件中有且只有一个根标签 属性值必须使用引号包含,推荐使用双引号 标签必须正确匹配,即正确开始和关闭 XML标签内严格区分大小写 <?xml version="1.0" encoding="utf-8"?&gt
Linux 常用命令 – 给linux初学者
05-30 1937
Linux 常用命令 1.# 表示权限用户(如:root),$ 表示普通用户 开机提示:Login:输入用户名 password:输入口令 用户是系统注册用户成功登陆后，可以进入相应的用户环境. 退出当前shell,输入:exit 2.useradd netseek 添加一个netseek用户 passwd netseek 给netseek这个用户设置密码. (/etc/passwd /etc
HTML笔记
我的博客
12-23 5403
<!--HTML简介 • HTML 是用来描述网页的一种语言。 • HTML 指的是超文本标记语言: HyperText Markup Language • HTML 不是一种编程语言，而是一种标记语言，标记语言是一套标记标签 (markup tag) • HTML 使用标记标签来描述网页 • HTML 文档包含了HTML 标签及文本内容 • HTML文档也叫做 web 页面HTML 标签 • HT
特殊符号转义 （<， &lt ...）
weixin_30466421的博客
07-27 1733
public static String htmlReplace(String str){ str = str.replace("“","&ldquo;"); str = str.replace("”","&rdquo;"); str = str.replace(" ","&rdquo;"); str = str.replace("&amp;","...
shiro认证-SSM
....
12-01 91
md5加盐加密 Shiro认证 这里用以前的ssm项目为例 pom.xml依赖 <dependency> <groupId>org.apache.shiro</groupId> <artifactId>shiro-core</artifactId> <version>1.3.2</version&...
AngularJS控制器继承实践与属性传递
当子控制器使用`ng-controller`指令嵌套在父控制器的元素内时，子控制器会自动继承父控制器的属性。例如，上面的`ChildCtrl`中，如果直接写入`<div ng-controller="ChildCtrl">`，那么`ChildCtrl`的实例将会共享`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值