每当一个指令被创建的时候，都会面临一个选择：继承父作用域，还是创建一个自己的作用域。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 django -5 进阶

    高级知识点包括: 静态文件处理 中间件 上传图片 Admin站点 分页 使用jquery完成ajax 管理静态文件 项目中的CSS.图片.js都是静态文件 配置静态文件 在settings 文件中定义 ...

  2. 从 ie10浏览器下Symbol 未定义的问题 探索vue项目如何兼容ie低版本浏览器（ie9, ie10, ie 11 ）

    问题:     vue项目在ie11下一片空白并报Symbol 未定义的错 原因:     ie10浏览器解析不了es6的语法,需要我们使用babel(Babel是一种工具链,主要用于将ECMAScr ...

  3. struts2之constant 讲解 (转)

    struts.serve.static.browserCache 该属性设置浏览器是否缓存静态内容.当应用处于开发阶段时,我们希望每次请求都获得服务器的最新响应,则可设置该属性为false. stru ...

  4. Laravel 5.1 Blade模板引擎

    为什么要使用blade 它是干什么用的? blade模板引擎使我们写HTML页面的地方,使用它是因为它能给我们提供很多的遍历,减少代码的重复率 提高开发效率.我们写blade的路径是 resource ...

  5. 如何获取继承中泛型T的类型

    @SuppressWarnings("unchecked") public void testT() { clazz = (Class<T>)( (Parameteri ...

  6. jQuery整理笔记八----jQuery的Ajax

    Ajax,我一直读的是"阿贾克斯",据当时大学老师讲该读音出处是依据当年风靡欧洲的荷兰足球俱乐部阿贾克斯的名字来的,我认为说法挺靠谱的. jQuery封装了Ajax的交互过程,用户 ...

  7. Android无线测试之—UiAutomator UiSelector API介绍之六

    对象搜索—类名与包名 一.类名属性定位对象 返回值 API 描述 UiSelector calssName(String className) 完整类名匹配 UiSelector calssNameM ...

  8. 十六进制字符串 char 数组 转换 c/c++/java

    转载自:http://qing.blog.sina.com.cn/1820422183/6c81702733001qvk.html 1.c版 int hexcharToInt(char c) {    ...

  9. 微信小程序-学习总结（1）

    微信小程序尺寸单位 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx. 设备               rpx换算成px(屏幕宽度/750)   ...

  10. CRM客户关系管理系统-需求概设和详设

    大概设计 大概设计就是对需求进行一个整体性分析,把需要实现的功能都列出来,对于客户关系管理系统,我们需要从角色出发,从而确定有哪些需求,最好是画个思维导图 首先我们是为培训学校这么一个场景来开发的,所 ...