每当一个指令被创建的时候，都会面临一个选择：继承父作用域，还是创建一个自己的作用域。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. db2将原表列notnull属性修改为null属性的方法

    今天把自己遇到的一个小问题跟大家分享一下如何修改db2数据库表中列的属性--将列的非空属性改为允许空的属性,修改数据表的某一列属性其实很简单但是里面有需要细节需要dba注意,毕竟数据的安全才是最重要的 ...

  2. C++11写算法之插入排序

      插入排序,是指将从1 –> size-1的数一个个插入到前面已经排序好的数组中. 时间复杂度:O(n^2) , O(nlgn) (lgn指使用二分查找插入点位置) 空间复杂度:O(1) // ...

  3. haml入门

    1.什么是Haml Haml是HTML abstraction markup language,遵循的原则是标记应该是美的.Haml能够加速和简化模版,长处是简洁.可读.高效. 2.erbm模板和ha ...

  4. 七个迹象说明你可能受到APT 攻击

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXF1c2hp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...

  5. http://localhost:8080请求用户名和密码。信息为:“XDB” 解决办法

    windows查看端口占用情况 cmd下 netstat -ano 查看端口和对应的服务 为2520 Oracle的服务 源博客: http://blog.163.com/jxguo_05/blog/ ...

  6. 记录--java获取网络资源(图片、音频等)保存本地

    注:本人开始运行下面报 java.io.FileNotFoundException ,纠结很久后清理tomcat后运行成功 //获取wav文件地址 String vRecordUrl=(request ...

  7. DIV背景图片

    .bigY{    position:absolute;     width:95px;     height:93px;     visibility:visible;     right: 277 ...

  8. Django的admin定制

    1,models编写 #encoding=utf-8 from django.db import models # Create your models here. class BookInfo(mo ...

  9. JS添加标签

    <script>            function show(){                $('.add').unbind();                $('.low ...

  10. 判断IP地址是否合法

    /* return 1 if string contain only digits, else return 0 */ int valid_digit(char *ip_str) { while (* ...