大纲

  • 用于简单示例和简单应用的controller 应用

  • 多个controller应用的作用域问题

  • controller继承作用域问题

Controller的创建

AngularJs controller使用无处不在，在里代码演示比较简单的创建工作。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="exampleApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>App</title>

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

    <link href="bootstrap-theme.css" rel="stylesheet" />

    <link href="bootstrap.css" rel="stylesheet" />

    <script>

        angular.module("exampleApp", [])

            .controller("defaultCtrl", function ($scope) {

                $scope.setInput = function (value) {

                    console.log("print：" + value);

                }

            });

    </script>

</head>

<body ng-controller="defaultCtrl">

     <div class="well">

         <h3>Count</h3>

         <div class="form-group">

             <input class="form-control" required ng-model="value" />

             <button ng-click="setInput(value)">Click</button>

         </div>

     </div>

</body>

</html>

　　在这控制很简单，首先我在html 中添加了 ng-app 属性，表示module的作用范围。

在 body 中添加了 ng-controller  表示 defaultCtrl 控制器的作用范围。

input 便签中ng-model 指令的是绑定数据，双向数据绑定（MVVM）。

$scope 是AngularJs内置的作用域。

此实例的只是把输入的值打印到控制台中，如图：

仅此而已，简单吧。

多个控制器controller作用域问题

现在我们来改造下程序，

<body >

    <div class="well" ng-controller="defaultCtrl">

        <h3>Count</h3>

        <div class="form-group">

            <input class="form-control" required ng-model="value" />

            <button ng-click="setInput(value)">Click</button>

        </div>

    </div>

    <div class="well" ng-controller="defaultCtrl">

        <h3>Count</h3>

        <div class="form-group">

            <input class="form-control" required ng-model="value" />

            <button ng-click="setInput(value)">Click</button>

        </div>

    </div>

</body>

　　其余代码不变，我只是把放到body 中的属性 ng-controller 放到了两个div中。我重用了defaultCtrl控制器，猜想下，如果我在第一个input标签输入内容，我点击第二个控制器的button按钮，会出现你所期望的结果吗?

结果是否和你想你的一样呢，大家可以看到这个结果为undefined. 在个很好解释，应为他们的作用域不同，虽然你重复使用了统一控制器，但是在创建作用域确实不同的。

调用的工厂函数会返回不同的作用域。

那么如何进行不同作用域之间的访问呢，在Angularjs中对于作用域访问有个$rootScope 。

在这里有三个函数需要介绍下，

$on(name,handler)  注册一个事件处理函数，该函数在特定的事件被当前作用域收到时将被调用。

$emit(name,args)   向当前父作用域发送一个事件，直至根作用域。

   $broadcast(name,args) 向当前作用域下的子作用域发送一个事件，参数是事件名称以及一个用于作用向事件提供额外数据的对象。

   现在来更改下代码：

   

<script>

        angular.module("exampleApp", [])

            .controller("defaultCtrl", function ($scope,$rootScope) {

                $scope.$on("UpdateValue", function (event, args) {

                    $scope.input = args.zip;

                });

                $scope.setInput = function (value) {

                    $rootScope.$broadcast("UpdateValue", { zip: value });

                    console.log("print：" + $scope.input);

                }

                $scope.copy = function () {

                    console.log("copy：" + $scope.input);

                };

            });

    </script>

　　

 <div class="well" ng-controller="defaultCtrl">

        <h3>Count</h3>

        <div class="form-group">

            <input class="form-control" required ng-model="value" />

            <button ng-click="copy()">Copy</button>

        </div>

    </div>

　　在段代码中我添加了几个函数，同时改变了第二个控制器的函数。

结果：

确实发生了。

controller继承

<script>

        angular.module("exampleApp", [])

            .controller("defaultCtrl", function ($scope, $rootScope) {

                //$scope.$on("UpdateValue", function (event, args) {

                //    $scope.input = args.zip;

                //});

                $scope.setInput = function (value) {

                    //$rootScope.$broadcast("UpdateValue", { zip: value });

                    $scope.input = value;

                    console.log("print：" + $scope.input);

                }

                $scope.copy = function () {

                    console.log("copy：" + $scope.input);

                };

            })

        .controller("simpleCtrl", function ($scope) {

            $scope.copy = function () {

                console.log("copy：" + $scope.input);

            };

        });

    </script>

　　

<body ng-controller="defaultCtrl">

    <div class="well">

        <h3>Count</h3>

        <div class="form-group">

            <input class="form-control" required ng-model="value" />

            <button ng-click="setInput(value)">Click</button>

        </div>

    </div>

    <div class="well" ng-controller="simpleCtrl">

        <h3>Count</h3>

        <div class="form-group">

            <input class="form-control" required ng-model="value" />

            <button ng-click="copy()">Copy</button>

        </div>

    </div>

</body>

　　我添加了一个控制器，simpleCtrl  仔细观察下，发现defaultCtrl 包含了simpleCtrl 中，所以作用simple 也继承 了。

结果图：发下我在第一个窗中输入时，第二个也变了，应为都是同一个value。

$scope 作用域问题，在使用controller时 要明白其作用域。

AngularJs(五）从Controller控制器谈谈$scope作用域的更多相关文章

  1. angularjs的ng-repeat指令下的scope作用域

    ng-repeat指令在迭代的时候,每次迭代都会创建一个新的scope,比如下面的代码: <div ng-repeat="list in lists" ng-controll ...

  2. AngularJs之Scope作用域

    前言: 上篇博文AngularJs之directive中说了Scope作用域是个大坑,所以拿出来作为重点总结! 什么是scope AngularJS 中,作用域是一个指向应用模型的对象,它是表达式的执 ...

  3. AngularJS学习之旅—AngularJS Scope作用域(五)

    1.AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sco ...

  4. 转深入理解 AngularJS 的 Scope作用域

    文章转载英文:what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs 中文:http://www. ...

  5. AngularJS Scope(作用域)

    1. AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sc ...

  6. 关于AngularJS学习整理---浅谈$scope(作用域) 新手必备！

    作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正. $scope(作用 ...

  7. AngularJS–Scope(作用域)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Scope Scope 是一个应用程序的模块的对象.它是表达式的执行上下文.它充斥在DO ...

  8. 【angularJS】Controller控制器

    1. 定义 控制器(Controller)在AngularJS中作用是增强视图(View),AngularJS控制器是一个构造方法,用来向视图(View)中添加额外功能. ng-controller指 ...

  9. 一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好

    学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是 ...

随机推荐

  1. 蜂鸟A20开发板刷 cubietruck 的 SD 卡固件

    美睿视讯 为蜂鸟A20准备的 MerriiLinux 功能非常简陋.所以能用上主流的 debian 或者 LUbuntu 就可以说是非常迫切的需求了.蜂鸟A20(Merrii Hummingbird ...

  2. Javascript数组操作方法

    1.shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] ...

  3. 静态查找_Search

    #include <stdio.h> #define MAXSIZE 50 #define OK 1 #define ERROR 0 int F[MAXSIZE];//斐波那契数列 int ...

  4. 打印 上一主题 下一主题 利用cURL实现单个文件分多段同时下载，支持断点续传(修订版)

      利用cURL实现单个文件分多段同时下载,支持断点续传(修订版) [复制链接] 摘自 http://bbs.chinaunix.net/thread-917952-1-1.html 在ubuntu下 ...

  5. Single NumberII

    **一定要注意 == 运算符的优先级高于& 因此在条件判断的时候 必须加括号 class Solution { public: int IsBit1(int num, int place) { ...

  6. JS页面赋值

    <html>  <title>页面1</title> <div> <ul>  <li> <div class=" ...

  7. android 读取txt文件内容

    Android的res文件夹是用来存储资源的,可以在res文件夹下建立一个raw文件夹,放置在raw文件夹下的内容会被原样打包,而不会被编译成二进制文件,并且可以通过R文件进行很方便地访问. 比如我们 ...

  8. 在ASP.NET项目中使用CKEditor

    CKEditor是什么 CKEidtor是一个在线富文本编辑器,可以将让用户所见即所得的获得编辑在线文本,编辑器或自动将用户编辑的文字格式转换成html代码. 在ASP.NET工程中添加CKEdito ...

  9. JavaScript中forEach的用法相关

    首先说下JavaScript的forEach的标准格式. 为数组中的每个元素执行指定操作. array1.forEach(callbackfn[, thisArg]) 参数 定义 array1 必需. ...

  10. javascript 的对象

    所有事物都是对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 布尔型可以是一个对象. 数字型可以是一个对象. 字符 ...