每当一个指令被创建的时候，都会面临一个选择：继承父作用域，还是创建一个自己的作用域。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. Python 爬虫实战2 百度贴吧帖子

    爬取百度贴吧的帖子.与上一篇不同的是,这次我们需要用到文件的相关操作. 本篇目标 对百度贴吧的任意帖子进行抓取 指定是否只抓取楼主发帖内容 将抓取到的内容分析并保存到文件 1.URL格式的确定 首先, ...

  2. 003android初级篇之【转】Android开发中颜色的定义方法

    正好用到颜色的定义,但脑子里没有记住具体,转载一篇加强印象 1.使用Color类的常量,如: int color = Color.BLUE; // 创建一个蓝色 是使用Android提供的颜色 int ...

  3. SSH总结（一）

    其实学习struts等框架,不仅要知道怎么用,我们还应该多去看看框架的源码,知道为什么可以这样使用,凡事都知道为什么,以这样的态度学习,我们才能更加深一步的理解原理好实现方式,本类博客主要是个人学习总 ...

  4. SQL Server 还原错误“restore database正在异常终止 错误 3154”

    今天在还原数据库时,先建立相同名字的数据库,然后在该数据库上右键还原数据库.遇到了这样的一个错误: “备份集中的数据库备份与现有的 'RM_DB' 数据库不同. RESTORE DATABASE 正在 ...

  5. Java 基础巩固：装箱拆箱 你真的熟悉吗

    先考两道题: Integer a1 = 300; Integer a2 =300; System.out.print(a1 == a2); Integer b1 = 1; Integer b2 = 1 ...

  6. cocos2d-x-3.1rc0中找不到"extensions/ExtensionMacros.h"的问题

    笔者导入UI编辑器的资源时,提示无法打开包括文件:“extensions/ExtensionMacros.h”: No such file or directory” 然后参考了3.0的一篇文章.得出 ...

  7. 巨蟒django之CRM1 需求分析&&表结构设计&&注册登录验证

    1.需求分析 .项目 ()业务 ()权限的管理 .CRM customer relationship management 客户关系管理系统 .谁来使用CRM? 销售&&班主任& ...

  8. 安装git和配置

     首先更新系统 yum  -y update  安装依赖的包 yum -y install curl-devel expat-devel gettext-devel openssl-devel zli ...

  9. python系列七：Python3字典dict

    #!/usr/bin/python #Python3 字典#字典是支持无限极嵌套的citys={    '北京':{        '朝阳':['国贸','CBD','天阶','我爱我家','链接地产 ...

  10. Hibernate 框架入门(一)

    1. SSH Web 层: Struts2 业务层: Spring 持久层: Hibernate 2. Hibernate 概述 概述 Hibernate 是一个对象关系映射框架(ORM 框架); 对 ...