在Angularjs中用ng-controller指令定义了应用程序中的控制器;例如:

<div ng-app="myApp" ng-controller="myCtrl">
姓: <input type="text" ng-model="firstName"><br>
名: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>

在控制器中,可以定义方法和属性,而且一个页面可以有多个控制器,并且控制器是可以嵌套的。例如:

<html ng-app="myApp">
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-controller="CommonController">
<div ng-controller="Controller1">
<p>{{greeting.text}},Angular</p>
<button ng-click="test1()">test1</button>
</div>
<div ng-controller="Controller2">
<p>{{greeting.text}},Angular</p>
<button ng-click="test2()">test2</button>
<button ng-click="commonFn()">通用</button>
</div>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
</html>
控制器CommonController中定义了Controller1和控制器Controller2,Controller1,Controller2可以调用自己定义的方法和属性,如果不存在,则也可以调用CommonController中的方法和属性;所以可以把公共的定义在CommonControlle中
var app=angular.module("myApp",[]);
app.controller("CommonController",function($scope){
$scope.commonFn=function(){
alert("这是通用的");
}
$scope.greeting={
text:"common"
}
}) app.controller("Controller1",function($scope){
$scope.greeting={
text:"test11"
};
$scope.test1=function(){
alert("这是test1方法");
}
}); app.controller("Controller2",function($scope){
// $scope.greeting={
// text:"test22"
// };
$scope.test2=function(){
alert("这是test2");
}
});

 $emit和$broadcast的区别

$emit 只可以向自身以及父级传播事件;

$broadcast 只可以向自身以及子节点传播事件;

例如:

<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Scope1.css" />
</head>
<body>
<div ng-controller="EventController">
Root scope
<tt>MyEvent</tt> count: {{count}}
<ul>
<li ng-repeat="i in [1]" ng-controller="EventController">
<button ng-click="$emit('MyEvent')">
$emit('MyEvent')
</button>
<button ng-click="$broadcast('MyEvent')">
$broadcast('MyEvent')
</button>
<br>
Middle scope
<tt>MyEvent</tt> count: {{count}}
<ul>
<li ng-repeat="item in [1, 2]" ng-controller="EventController">
Leaf scope
<tt>MyEvent</tt> count: {{count}}
</li>
</ul>
</li>
</ul>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script type="text/javascript">
// function EventController($scope){
// $scope.count=0;
// $scope.$on("MyEvent",function(){
// $scope.count++;
// })
// }
var app=angular.module("myApp",[]);
app.controller("EventController",function($scope){
$scope.count=0;
$scope.$on("MyEvent",function(){
$scope.count++;
});
});
</script>
</html>

Angular Js 控制器的更多相关文章

  1. Angular JS + Express JS入门搭建网站

    3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外 ...

  2. angular.js 中的作用域 数据模型 控制器

    1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...

  3. Angular JS - 5 - Angular JS 模块和控制器

    1.引入 1.5版本的angularjs,直接打印angular对象: --> <!DOCTYPE html> <html> <head lang="en ...

  4. Angular JS - 4 - Angular JS 作用域与控制器对象

    1. 控制器对象使用 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...

  5. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  6. (翻译)Angular.js为什么如此火呢?

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  7. Angular JS 学习之路由

    1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...

  8. Angular JS 学习之Bootstrap

    1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...

  9. Angular.js 的初步认识

    MVC模式 模型(model)-视图(view)-控制器(controller) Angular.js采用了MVC设计模式的开源js框架 1.如何在angular.js建立自己的模块(model),控 ...

随机推荐

  1. instantclient_11_2 连接oracle数据

    (1)首先你要先下载instantclient (解压如下),修改你     instantclient/network/admin/tnsnames.ora 文件,将你oracle的服务器地址写上 ...

  2. (2) yum源配置-163

    1.获取yum源文件 登录http://mirrors.163.com/.help/centos.html,查看CentOS6的链接地址(右键点击“CentOS6”,选择复制链接地址),链接地址为:h ...

  3. TCP可靠传输详解

    TCP提供了可靠的传输服务,这是通过下列方式提供的: 分块发送:应用数据被分割成TCP认为最适合发送的数据块.由TCP传递给IP的信息单位称为报文段或段(segment) 定时确认重传:当TCP发出一 ...

  4. centos7 安装vnc服务

    一,安装服务器端 1,添加用户: # useradd vnc # passwd vnc 2,安装gnome桌面 # yum groupinstall "GNOME Desktop" ...

  5. jqury 如何获取 kindeditor 中textarea 的值

    获取文本内容,可是的创建时怎么也不能获取,利用FF的firebug查看到自己所写的内容在一个iframe中,于是想从iframe中获取文本,想要用 $(“ifame”).html();获取内容,可是依 ...

  6. Elasticsearch集群问题,导致主master节点发现不了node节点

    个人博客:https://blog.sharedata.info/ 最新需要配置es集群采用5个分片和1个副片,正好是11台机器,而只保留一份备份所以只需要5*2=10台机器方案:1.1台作为mast ...

  7. 洛谷P2661 信息传递==coedevs4511 信息传递 NOIP2015 day1 T2

    P2661 信息传递 题目描述 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学. 游戏开始时,每人都只知 ...

  8. 九度OJ 1001:A+B for Matrices

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:17682 解决:7079 题目描述: This time, you are supposed to find A+B where A and ...

  9. zookeeper curator CRUD

    目录 Curator客户端的基本操作 写在前面 1.1.1. Curator客户端的依赖包 1.1.2. Curator 创建会话 1.1.3. CRUD 之 Create 创建节点 1.1.4. C ...

  10. 【基于rssi室内定位报告】rssi分布情况标识位置

    import matplotlib matplotlib.use('Agg') import numpy as np from numpy import array from matplotlib i ...