AngularJs学习笔记(2)--控制器和ng-bind

最新推荐文章于 2021-06-21 19:28:13 发布
最新推荐文章于 2021-06-21 19:28:13 发布
阅读量465 收藏
点赞数
分类专栏： AngularJS JS
JS 同时被 2 个专栏收录
122 篇文章 0 订阅
订阅专栏
AngularJS
10 篇文章 0 订阅
订阅专栏


http://xlows.blog.51cto.com/5380484/1425255


(1)控制器

在angular中控制器随处可见，控制器在MVC里面主要是做控制业务逻辑，控制model的数据。


例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
< html >
< head >
     < meta  charset = "utf-8" >
</ head >
< body >
     < div  ng-app = "" >
 
         < div  ng-controller = "firstController" >
             < input  type = "text"  value = ""  ng-model = "name" />
             < input  type = "text"  value = ""  ng-model = "age" />
             {{name}}
             {{age}}
         </ div >
     </ div >
     < script  type = "text/javascript"  src = "app/index.js" ></ script >
< script  type = "text/javascript"  src = "../../vendor/angular/angularjs.js" ></ script >
</ body >
</ html >

可以看到div下，有一个ng-controller的指令，里面的firstController可以暂时理解为angular的表达式，它会去找firstController的变量。我们可以在index.js的文件里声明这个变量。

1
2
3
4
5
6
7
8
9
var  firstController =  function ($scope){
 
     // $scope 我们叫做作用域
     // 申明一个Model
     $scope.name =  '张三' ;
 
     $scope.age = 20;
 
}

在function中必须写成$scope，这是angular的依赖注入，他是angular的一个作用域，是管理控制器的，它也可以向外找，最上层有一个rootscope。

wKiom1OZFa6Q9TtXAAAecl4alJ0497.jpg


运行后可以看到此时name为张三，age为20，如果修改了任意一个，label也会改变，这就是上节所说的双向绑定。


(2)ng-bind

继续看下上面的代码，如果angular没加载完而页面已经渲染了，那会是什么样呢？

wKiom1OZFgyh5ag_AAAgQkYagok580.jpg

可以看到{{name}}和{{age}}会直接在页面上显示出来，当angular加载完后，数据马上会渲染上去。

模拟一下从服务器下载angular的过程，我们在页面中加一行alert代码。

1
2
3
     <script>
         alert(3);
     </script>

wKiom1OZFt-xmGLkAABXfRWScGY665.jpg可以看到在alert的时候页面上会显示用户不需要的东西，此时就可以用到ng-bind。

ng-bind是angular的一个指令。我们可以把html页面修改成如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
< html >
< head >
     < meta  charset = "utf-8" >
</ head >
< body >
     < div  ng-app = "" >
 
         < div  ng-controller = "firstController" >
             < input  type = "text"  value = ""  ng-model = "name" />
             < input  type = "text"  value = ""  ng-model = "age" />
             < div  ng-bind = "name" ></ div >
             < div  ng-bind = "age" ></ div >
         </ div >
     </ div >
     < script >
         alert(3);
     </ script >
     < script  type = "text/javascript"  src = "app/index.js" ></ script >
< script  type = "text/javascript"  src = "../../vendor/angular/angularjs.js" ></ script >
 
 
</ body >
</ html >

这样才运行的时候就不会渲染用户不需要的东西

wKiom1OZF7nwVct3AABLLdeXUWM876.jpg点击确定后，会加载model中的数据：

wKioL1OZF8KhfWNSAAAcgG9UBF0864.jpg

通过审查页面元素，可以看到，ng-bind还为model自动添加了一个classwKioL1OZGB_Qrd6RAAD-QqcKcMM251.jpg

因此两个label会在下一行显示。


简单的绿竹
关注
专栏目录
Angular快速入门2 ---控制器（controller）
songchuncao的博客
04-26 602
Angular入门进阶版 控制器（controller）
AngularJS学习笔记
欧阳惜竹的博客
06-26 1164
这里写自定义目录标题一、指令1. ng-app=" "2. ng-controller3. ng-init="变量=值;变量='值'"4. ng-model="变量"ng-model1）ng-empty 空2）ng-not-empty 不空3）ng-touched 和控件进行过交互4）ng-untouched 和控件没有进行过交互5）ng-valid 表单通过验证6）ng-invalid 表单未通...
ng-bind
xupeng1986的专栏
11-18 920
//{{name}} //{{age}}
angularJs ng-bind,ng-init,ng-bind-html,ng-bind-template区别
09-12 541
用了angularJs的对这几个指令应该并不陌生，它们之前就什么区别，可能有些人对此用法比较模糊，下面我们来一一讲解下： 1.ng-bind 作用：告诉AngularJS用给定表达式的值替换指定HTML元素的文本内容，并在该表达式的值更改时更新文本内容 注意： ng-bind不能解析html元素，它只能解析普通字符串 <body ng-controller='MyCtrl'> <div ng-bind="html"></div> <div ng-
AngularJS 关于ng-model和ng-bind还有{{}}
JackLiu16的博客
10-05 321
What's the difference between ng-model and ng-bind ng-bind has one-way data binding ($scope --&gt; view). It has a shortcut {{ val }} which displays the scope value $scope.val inserted into html wher...
AngularJS1.X学习笔记2-数据绑定详解
12-04
在这个例子中，`dataCtrl` 控制器中的 `$scope.data` 变量被绑定到`<h1>` 元素的文本，当 `$scope.data` 的值改变时，`<h1>` 元素的内容也会自动更新。 2. **双大括号 `{{ }}` 表达式**：`{{ }}` 是AngularJS中的另...
angularjs学习笔记之双向数据绑定
11-22
本篇学习笔记将深入探讨这一概念及其在实际应用中的实现方式。 首先，我们来看一个简单的双向数据绑定的例子。当用户在输入框中输入内容时，与之绑定的数据模型会实时更新，同时视图上的显示也会随之改变。这种效果...
AngularJs学习笔记1
08-08
【AngularJS学习笔记1】 AngularJS 是一个强大的前端JavaScript框架，用于构建动态Web应用程序。它通过数据绑定和依赖注入简化了HTML页面与JavaScript代码之间的交互。这篇笔记将深入探讨AngularJS的一些基本概念，...
ng-bind-html 的使用
weixin_34034670的博客
02-04 252
AngualrJS 提供了指令ng-bind-html 用于绑定包含HTML标签的文档，使用方式： &lt;ANY ng-bind-html=""&gt; ... &lt;/ANY&gt; 测试案例： index.html &lt;div ng-controller="TestCtrl"&gt; &lt;div&gt; ...
angularjs中使用ng-bind-html和ng-include
diejiankuai3444的博客
09-17 98
下面这个例子，往div标签内添加html内容： <!doctype html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>demo</title> <script type="text/javascript"...
angular-过滤器date日期时间
guohao326的博客
05-01 2959
日期时间过滤器                     原始输出：                             日期格式化：                             日期格式化：通常情况下，需要按照用户的要求进行输出，这时候就会附带参数             y/M/d/h/m/s/E 年/月/日/时/分/秒/星期
Linux运维实战之DNS（bind）服务器的安装与配置
weixin_34288121的博客
12-31 1632
上次博文我们讨论了DNS的基础，本次博文我们重点来看看如何配置一台DNS服务器。 【本次博文的主要内容】 bind服务器简介（包括客户端工具dig的介绍） 配置正向解析DNS服务器 配置反向解析DNS服务器 配置辅助DNS服务器并在主辅之间实现区域传送 一、BIND服务器简介： Bind是Berkeley Internet Name Do...
AngularJS 学习笔记（2）
hmyhicc的博客
09-05 341
观看angularJS视频教程做了如下笔记： 一、简介 1. $scope 里的$apply $digest 方法 scope 是一个指向应用model的object，也是表达式的执行 上下文。 scope 被放置于一个类似应用的DOM结构的层次结构中。 angular是怎么知道变量发生了改变： 要知道一个变量变了，方法不外乎两种： 1.能通过固定的接口才能改变变量的值，比如说只
AngularJS 日期格式化详解
weixin_38599199的博客
07-13 448
AngularJS 日期格式化详解 AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。 AngularJS的日期格式化有两种形式，一种是在HTML页面，一种是在JS代码里，都是用到AngularJS的过滤器$f
ng-bind 拼接字符标签
weixin_30566149的博客
08-05 621
转载于:https://www.cnblogs.com/web-fusheng/p/7291296.html
html元素定义ng bind,深入理解AngularJS中的ng-bind-html指令
weixin_35755188的博客
06-21 382
前言在为html标签绑定数据的时，如果绑定的内容是纯文本，你可以使用{{}}或者ng-bind。但在为html标签绑定带html标签的内容的时候，angularjs为了安全考虑，不会将其渲染成html，而是将其当做文本直接在页面上展示。先来看一个例子angular.module("myapp", []).controller("MyController", function ($scope) {$...
项目总结（4）关于label标签和input标签在angular.js中的用法
时清云的博客
11-07 3398
以前的时候对于label这个标签用的也很少，所以只知道有个label for的用法。今天由于在项目中出现了一点小问题，所以就总结一下。 先说说label标签。首先label就是标签的意思。具体事例请看下面的例子： for="male">Male for="female">Female 这个是我们经常用的和经常提起的，所以这个大家都不陌生。但是其中有几个要点。
基于JavaScript的human-resource-backend后端开发源码设计
最新发布
10-05
该项目是一款以JavaScript为主语言的HR（人力资源）后端开发源码，集成了Java、CSS、Vue和HTML等多种语言，共计1035个文件。具体文件构成如下：236个Java文件、179个JavaScript文件、104个PNG图片文件、59个CSS文件、56个Vue文件、54个GIF动画文件、42个类文件、41个XML文件、36个SVG文件、35个HTML文件。该后端系统旨在构建一个高效的人力资源管理平台。
AngularJS 1.x 数据绑定深度解析：ng-bind与{{}}详解
本文档是关于AngularJS 1.x版本的数据绑定详解学习笔记。在前一篇文章中对Angular进行了初步了解后，现在将重点探讨Angular如何通过数据绑定来实现模型层与视图层的分离，以及它与其他MVC框架（如ThinkPHP和Struts）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值