每当一个指令被创建的时候，都会面临一个选择：继承父作用域，还是创建一个自己的作用域。Angular为指令的scope参数提供了三种选择，分别是: false（继承）, true（不继承）, {},默认是false。

scope: false

直接使用父作用域中的变量

测试代码如下:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            p {

                margin: 0;

            }

            .a {

                border: 1px solid black;

            }

        </style>

    </head>

    <body ng-app= "myApp">

        <div ng-controller= "myCtrl">

            <div class="a">

                <p ng-bind= "name"></p>

                <p ng-bind= "age"></p>

                <input type="text" ng-model= "name"/>

            </div>

            <mydir></mydir>

        </div>

    </body>

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

    <script>

        var myApp= angular.module("myApp", []);

        myApp.controller("myCtrl", function($scope){

            $scope.name= "bluce";

            $scope.age= 20;

            $scope.changeAge= function(){

                $scope.age= 21;

            }

        });

        //创建指令

        myApp.directive("mydir", function(){

            return {

                restrict: "AE",

                scope: false,

                replace:　true,

                template: "<div><p ng-bind= 'name'>\

                    </p><p ng-bind= 'age'></p>\

                    <input type= 'text' ng-model= 'name'/>\

                    </div>"

            }

        });

    </script>

</html>

页面如下：

我们在上下两个输入框中改变name，都能互相改变

scope: true

创建一个新的作用域，这个作用域继承自我们的父作用域

理想情况下: 编辑父/子作用域都只会在自己的范围生效

但有一个奇怪的现象:

刚进入页面,编辑父作用域，子作用域跟着发生改变，然后编辑子作用域，父作用域不发生改变，最后再编辑父作用域，子作用域不发生改变

可以这么理解: 当子作用域尚未开始编辑，会被认定为没有资格独立，当它开始改变，便能开始独立

scope:{}

创建隔离的作用域

通过向scope的{}中传入特殊的前缀标识符，来进行数据的绑定

我们使用了隔离的作用域，不代表我们不可以使用父作用域的属性和方法。

我们可以通过向scope的{}中传入特殊的前缀标识符（即prefix），来进行数据的绑定。

下面我们来看看如何使用这些前缀标识符：

@ 它将本地作用域和DOM中的属性值单向绑定起来(子作用域无法改变父作用域，父作用域能改变子作用域)，且这个属性值必须是父作用域的

语法: <div my-dir the-name= "{{name}}"></div> //dom元素的命名用"-"连接

父作用域: $scope.name= "amy"

//directive的命名采用驼峰命名

myApp.direcitve("myDir", function(){

　　return {

　　　　restrict: "A",

　　　　scope: {

　　　　　　name: "@theName"

　　　　}，

　　　　template: "<span ng-bind= 'name'></span>"

　　}

})

= 与@不同的是，@是针对字符串的传递，=是针对对象的引用，它属于双向绑定

语法:

<my-dir pre-person= "person"></my-dir>

父作用域:

$scope.person= {name: "amy", age: 21}

directive：

myApp.directive("myDir", function(){

　　return {

　　　　restrict: "E",

　　　　scope: {

　　　　　　person: "=prePerson"

　　　　},

　　　　template: "<input type= 'text' ng-model= 'person.age'/>"

　　}

})

& 是对方法的引用

语法:

<my-dir the-change-job= "changeJob()"></div>

父作用域:

$scope.changeJob= function(){$scope.job.name= "PE"}

direcitve:

myApp.directive("myDir", function(){

　　return {

　　　　restrict: "E",

　　　　scope: {

　　　　　　changeJob: "&theChangeJOb"

　　　　},

　　　　template: "<input type= 'button' value= '改变工作' ng-click= 'changeJob()'>"

　　}

})

来一起合起来的例子:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            p {

                margin: 0;

            }

            .a {

                border: 1px solid black;

            }

        </style>

    </head>

    <body ng-app= "myApp">

        <div ng-controller= "myCtrl">

            <div class="a">

                <p ng-bind= "name"></p>

                <p ng-bind= "age"></p>

                <input type="text" ng-model= "name"/>

                <p ng-bind= "job.name"></p>

                <input type="text" ng-model= "job.name"/>

            </div>

            <my-dir the-name= "{{name}}" the-job= "job" the-change-job= "changeJob()"></my-dir>

        </div>

    </body>

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

    <script>

        var myApp= angular.module("myApp", []);

        myApp.controller("myCtrl", function($scope){

            $scope.name= "bluce";

            $scope.age= 20;

            $scope.job= {name: "engineer", time: 3};

            $scope.changeJob= function(){

                $scope.job.name= "PE";

            }

        });

        //创建指令

        myApp.directive("myDir", function(){

            var a= {

                restrict: "AE",

                scope: {

                    name: '@theName',

                    job: '=theJob',

                    changeJob: '&theChangeJob'

                },

                replace:　true,

                template: "<div><p ng-bind= 'name'></p>\

                    <input type= 'text' ng-model= 'name'/>\

                    <p ng-bind= 'job.name'></p>\

                    <input type= 'text' ng-model= 'job.name'/>\

                    <input type= 'button' value= '改变工作' ng-click= 'changeJob()'/>\

                    </div>"

            };

            return a;

        });

    </script>

</html>

scope 作用域的更多相关文章

  1. AngularJS Scope(作用域)

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

  2. AngularJs之Scope作用域

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

  3. Spring中scope作用域

    scope作用域: 1.prototype 2.request      3.session 4.singleton 5.global session 1.prototype(多例) prototyp ...

  4. Angular JS 学习之 Scope作用域

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

  5. AngularJs(五）从Controller控制器谈谈$scope作用域

    大纲 用于简单示例和简单应用的controller 应用 多个controller应用的作用域问题 controller继承作用域问题 Controller的创建 AngularJs controll ...

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

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

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

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

  8. laravel中的scope作用域

    laravel中在模板中处理(属于不属于)的数据(增删改查),引入了scope来处理 也就是在模板定义方法中,加上前缀scope laravel中要求在定义的方法scope后面跟的字母要大写 后面那我 ...

  9. 38.angular的scope作用域

    转自:https://www.cnblogs.com/best/tag/Angular/ 1. Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. S ...

  10. AngularJs $rootScope.Scope 作用域操作

    这里讲的是一些scope的操作,如创建/注销/各种监听及scope间的通信等等. $rootScope.Scope 可以使用$injector通过$rootScope关键字检索的一个根作用域. 可以通 ...

随机推荐

  1. 通过ssh隧道访问mysql(转载)

    我的机器可以连接服务器A,A可以访问服务器B上的mysql,但是我的机器不能访问B,所以我需要建立一个我本地机器到服务器A的ssh隧道来访问服务器B上的mysql. 理一下思路: 1.我要ssh的服务 ...

  2. mongodb性能问题及原理分析

    近期忙着把一个项目从MySQL迁移到MongoDB,在导入旧数据的过程中.遇到了些许波折,犯了不少错误,但同一时候也学到了不少知识,遂记录下来. 公司为这个项目专门配备了几台高性能务器,清一色的双路四 ...

  3. java blob

    package net.qysoft; import java.io.File;import java.io.FileOutputStream;import java.sql.Blob;import ...

  4. day2 python基础 while 循环补充

    一.上节内容回顾 二.pycharm安装. 安装好以后激活方法:直接打开pycharm,选License server激活,输入:http://idea.imsxm.com 三.补充知识:如果字符串本 ...

  5. MySQL的limit子句

    1.理解: limit用来取结果集中的固定几条记录 2.参数: limit offset,pagesize offset:偏移量,为0时,可以省略 pagesize:每页显示的行数,通常是固定的 0表 ...

  6. Linux 进程（二）：进程关系及其守护进程

    进程关系 进程组 进程组是一个或多个进程的集合.通常,它们是在同一作业中结合起来的,同一进程组中的各进程接收来自同一终端的各种信号,每个进程组有一个唯一的进程组ID.每个进程组有一个组长进程,该组长进 ...

  7. Partial Sum

    Partial Sum Accepted : 80   Submit : 353 Time Limit : 3000 MS   Memory Limit : 65536 KB  Partial Sum ...

  8. window 注册表上下文菜单如何配置？

    注册表结构? Keys Abbreviation Description 描述 HKEY_CLASSES_ROOT HKCR Stores file association and COM objec ...

  9. samba了解

    1. samba是一个网络服务器,用于Linux和Windows之间共享文件 2,amba服务的启动.停止.重启    service smb start|stop|restart3. 掌握samba ...

  10. docker 批量导出脚本

    用for 循环实现 docker imagesREPOSITORY                                               TAG                 ...