文档章节

6.控制器

o
 oneboi
发布于 2016/11/25 11:19
字数 785
阅读 3
收藏 0

#1. 控制器的作用 AngularJS控制器控制AngularJS应用程序的数据,是常规的JavaScript对象。

#2.控制器的定义

ng-controller指令就是用来定义应用程序控制器的,并且同时创建了一个新的作用域关联到相应的DOM元素上。

3.树形作用域

作用域:

所谓作用域就是一个指向应用模型的对象,它是表达式的执行环境,作用域有层次结构,这个层次和相应的DOM几乎是一样的,作用域能监控表达式和传递事件并且可以从父作用域继承属性

每一个AngularJS应用都有一个绝对的根作用域。但也可能有多个子作用域。

一个应用可以有多个作用域,因为有一些指令会生成新的子作用域,当新作用域被创建的时候,他们会被当成子作用域添加到父作用域下,这使得作用域会变成一个和相应DOM结构一个的树状结构。

4. 一个指向应用模型的对象(也就是$scope)

`$scope就是把一个DOM元素(应用程序)连结到控制器上的对象

5. dmeo创建控制器

<div ng-app="" ng-controller="MyController">
 
请输入一个名字:<input type="text" ng-model="person.name"> 
 
Hello <span ng-bind="person.name"></span> 
 
</div>    
 
<script>
function MyController($scope) {
   $scope.person = {
      name: "World"
   };
}
</script>

属性:

我们通过ng-controller指令创建了一个JavaScript对象 —— MyController并带有name属性,那参数$scope是什么呢,代表什么意思呢。

#6. 控制器参数 $scope(对象) 现在我们就来解答MyController对象参数 —— $scope。

$scope就是把一个DOM元素连结到控制器上的对象,它提供一个绑定到DOM元素(以及其子元素)上的执行上下文。它也是一个JavaScript对象,指向应用程序作用域内的所有HTML元素和执行上下文。作用域呢,就是作为$scope的数据属性关联到DOM上的,并且能在需要调试的时候被获取到。


要明确创建一个$scope对象,我们就要给DOM元素安上一个controller对象,使用的是ng-controller 指令属性。

#7. 作用域继承

所有$scope都遵循原型继承,这意味着它们都能访问父$scope们,对任何属性和方法,如果AngularJS在当前$scope上找不到,就会到父$scope上去找,如果在父$scope上也没找到,就会继续向上回溯,一直到$rootScope上,这个$rootScope是最顶级的$scope,它对应着含有 ng-app指令属性的那个DOM元素,也就是说根作用域关联的DOM就是ng-app指令定义的地方。

也就是说,拥有了$scope,我们就可以操作作用域内任何我们想要获取的对象数据。

8. 控制器的方法

控制器不仅声明属性也可以声明方法,如下所示:

<div ng-app="" ng-controller="MyController">
     Your name:
     <input type="text" ng-model="username">
     <button ng-click="sayHello()">打招呼</button>
     <hr />
     {{greeting}}
</div>
 
<script>
function MyController($scope) {
  $scope.username = 'World';
  $scope.sayHello = function() {
    $scope.greeting= 'Hello ' + $scope.username + '!';
  };
}
</script>

#9. 外部控制器

<script src="MyController.js"></script>

© 著作权归作者所有

下一篇: 5.MVVM模式
o
粉丝 2
博文 89
码字总数 29764
作品 0
昆明
私信 提问
iOS使用自定义URL实现控制器之间的跳转

原文出处:Dariel在杭州 一个app往往有很多界面,而界面之间的跳转也就是对应控制器的跳转,控制器的跳转一般有两种情况 push 或者 modal,push 和 modal 的默认效果是系统提供的,但也可以自定义...

秦无炎
2016/11/10
3
1
【翻译】在Ext JS 6通用应用程序中使用既共享又特定于视图的代码

原文:Using Both Shared and View-Specific Code in an Ext JS 6 Universal App 在本文,在展示如何编写Ext JS 6通用应用程序代码以使控制器和视图模型能适用于特定视图又是共享的。 想了解...

tianxiaode2008
2015/08/07
0
0
windows活动目录管理(二)添加卸载额外控制器

(一)添加额外域控制器: 1.使用额外域控制器,可以带来如下好处: 提供容错功能 提供负载均衡 c. 更易于用户的连接和访问 2.安装额外域控制器的条件: 操作系统版本必须受当前域功能级别支...

薛文昌
2017/06/14
0
0
开源框架VTMagic的使用介绍

特性概要 每个页面都是一个完整的控制器,友好支持个性化自定义; 页面切换时能准确触发相应的生命周期方法(viewWillAppear:等),便于管理各自页面的数据加载和其它逻辑处理; 导航栏支持多...

天机
2016/06/13
189
2
iOS之轻松上手block

原文出处: codingZero 欢迎分享原创到伯乐头条 导语 不会使用block的iOS程序员,不是一个合格的程序员 学会了block,你再也不想用繁琐的代理 block没有你想象中的那么难,不要害怕,不要畏惧...

刘星石
2016/03/04
43
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
7
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
昨天
7
0
Flutter系列之在 macOS 上安装和配置 Flutter 开发环境

本文为Flutter开发环境在macOS下安装全过程: 一、系统配置要求 想要安装并运行 Flutter,你的开发环境需要最低满足以下要求: 操作系统:macOS(64位) 磁盘空间:700 MB(不包含 IDE 或其余...

過愙
昨天
6
0
OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
昨天
2.7K
16
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
昨天
42
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部