在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. 魔幻特效，慢放世界，nova 3带你玩转抖音新技能

    无论是明暗相交的都市夜色, 还是鲜亮风景前的逆光美人: 无论是瞬息飘飞的叶片, 还是动如脱兔的稚子孩童…… 色彩与速度,精彩的每一刻, 华为摄影都尽在掌握! (华为手机摄影效果) 一直以来,华为的图形 ...

  2. NYOJ 613 免费馅饼

    免费馅饼 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描写叙述 都说天上不会掉馅饼,但有一天gameboy正走在回家的小径上,忽然天上掉下大把大把的馅饼.说来gameboy ...

  3. IDEA 去掉 ALT + / 自动补全

    取消掉Alt + / 自动补全 setting -> keymap -> main menu -> code -> completion -> cyclic Expand ...

  4. 【Github】之突然访问不了Github地址

    访问Github突然上不去了 解决办法: 一.修改hosts 1.打开Dns检测|Dns查询 - 站长工具2.在检测输入栏中输入http://github.com官网3.把检测列表里的TTL值最小的I ...

  5. 将Xcode升级到10.0以上版本，Appium启动报错的问题

    前言 现在的Xcode最新版本都是在10.1,原先使用的版本是9.4.1!结果今天手贱将其升级... 然后,跑IOS自动化时,出现“Xcode version '0.1'. Support for X ...

  6. Hugo hexo 搭建博客系列1：自己的服务器

    hexo jekyll https://hexo.io/zh-cn/ http://theme-next.iissnan.com/getting-started.html Hexo 是高效的静态站点生 ...

  7. JavaScript提高：002：ASP.NET使用easy UI实现tab效果

    近期在做ASP.NET项目中,须要实现一个tab页控件. 发现asp.net控件中没找到现成的. 一般的实现都须要js和div配合.于是就用到了easyui里面的. 使用也非常easy.将easyui ...

  8. js关于事件的一些总结（系列一）

    今天小弟在这里说一下 js 关于事件的一些总结  在这里直接上代码 省去啰嗦的步骤以免看烦了  总结的不好希望大家见谅 一.事件的默认事件 事件的默认事件是什么? 就是a标签有一个链接事件  inpu ...

  9. unity中动态生成网格

    以下是绘制正方形面片的一个例子,方便之后查阅: 效果如图所示: 红轴为x方向,蓝轴为z方向. 代码如下: using System.Collections; using System.Collecti ...

  10. 26计算限制的异步操作01-CLR

    由CLR via C#(第三版) ,摘抄记录... 异步优点:在GUI应用程序中保持UI可响应性,以及多个CPU缩短一个耗时计算所需的时间. 1.CLR线程池基础:为提高性能,CLR包含了代码来管理他 ...