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

    如何查看是否为iframe *使用FireFox组件firebug->firepath 1.Top Window:可直接定位 2.iframe#i:根据id定位 定位方法: switch_to. ...

  2. Unity3d 游戏退出界面1

    功能需求:点击退出按钮,弹出“退出”UI,询问玩家是否退出游戏: 退出按钮 退出UI: publicclass GameQuit : MonoBehaviour { // 取消按钮 public  G ...

  3. iOS-ASIHTTPRequest框架学习

    本文转载至 http://www.cnblogs.com/A-Long-Way-Chris/p/3539679.html 前段时间在公司的产品中支持了够快网盘,用于云盘存储. 在这个过程中,学习到了很 ...

  4. [CTSC1999][网络流24题] 星际转移

    36. [CTSC1999][网络流24题] 星际转移 ★★★☆   输入文件:home.in   输出文件:home.out   简单对比时间限制:1 s   内存限制:128 MB «问题描述: ...

  5. x+=y与x=x+y有什么区别?

    一般情况下,x+=y与x=x+y输出结果是等价的,因此两种写法是可以通用的,但是在某些临界值选用x+=y更加合适,比如: short n=3; n+=1;//编译通过 n=n+1;//编译失败 上述例 ...

  6. 集合遍历的时候删除List

    在Java中有时候我们会需要对List里面的符合某种业务的数据进行删除,但是如果不了解里面的机制就容易掉入“陷阱”导致遗漏或者程序异常.本文以代码例子的方式进行说明该问题. 1.采用索引下标遍历的方式 ...

  7. influxDB---Data Exploration

    the group clause group by 返回的分组结果是根据用户指定的tag ,time interval. 1.group by tags 2.group by time interva ...

  8. nginx + uwsgi + django/flask Nginx + php-fpm + PHP

    后端服务器设置nginx + uwsgi + django/flask需要注意的问题 - ACE开发者 https://acejoy.com/2018/09/09/547/ 后端开发应用中,除了Ngi ...

  9. 解决Raize日历控件显示的问题

    解决Raize日历控件显示的问题 近自己的程序被测试人员发现一个小问题,就是程序中的日历选择框,显示中的“星期一.星期二....”都显示成了“星.....”,我自己看了代码,原来是raize的控件问题 ...

  10. 启动hive --service metastore &出现Missing Hive Execution Jar: /opt/apache-hive-1.2.0-bin//lib/hive-exec-*.jar

    原因:出现上述问题通常是运行hive 在bin/目录下的脚本所致. 解决办法:就是让HIVE_HOME变量指向hive-trunk/build/dist目录,将$HIVE_HOME/bin添加到PAT ...