angular学习笔记(三十)-指令(8)-scope

<!DOCTYPE html>

<html ng-app="myApp">

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <div ng-controller="c1" ng-init="c11='c11'">

        {{c11}}

        <div ng-controller="c2" ng-init="c21='c21'">

            <div>{{c21}}</div>

            <div d2></div>

            <div ng-controller="c3" ng-init="c31='c31'">

                <div>{{c31}}</div>

                <div d3></div>

            </div>

        </div>

    </div>

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

    <script>

        angular.module('myApp', [])

        .controller('c1', function($scope) {

        })

        .controller('c2', function($scope) {

        })

        .controller('c3', function($scope) {

        })

        .directive('d3', function() {

            return {

                restrict: 'A',

                scope: false, // 默认

                template: '<div>{{c11}} {{c21}} {{c31}}</div>',

                controller: function($scope, $element, $attrs, $transclude) {

                    $scope.c31 = 'c31c'

                }

            };

        })

        .directive('d2', function() {

            return {

                restrict: 'A',

                scope: true,

                template: '<div>{{c11}} {{c21}}</div>',

                controller: function($scope, $element, $attrs, $transclude) {

                    $scope.c21 = 'c21c'

                }

            };

        })

    </script>

</body>

</html>

@

<!DOCTYPE html>

<html ng-app="dirAppModule">

<head>

  <title></title>

  <meta charset="utf-8">

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

  <script type="text/ng-template" id="text.html">

    <div>

      <h3 style="background-color:{{color}}" ng-transclude></h3>

    </div>

  </script>

  <script>

    var appModule = angular.module('dirAppModule', []);

    appModule.controller('bgColor',function($scope){});

    appModule.directive('cdHello',function() {

        return {

            restrict:'EAC',

            templateUrl:'text.html',

            replace:true,

            transclude:'element',

            scope:{

                color:'@colAttr'

            },

            link:function(scope,ele,attrs,ctrl,trans) {

                ele.bind('click',function() {

                    scope.$apply(function() {

                        scope.color = '#C0DCC0';

                    })

                })

                ele.bind('mouseover',function() {

                    ele.css({'cursor':'pointer'})

                })

            }

        }

    })

  </script>

</head>

<body>

  <div ng-controller="bgColor">

    <input ng-model="color" placeholder="请输入颜色值"/>

    <br/>

    <cd-hello col-attr="{{color}}"><span>code_bunny</span></cd-hello>

  </div>

</body>

</html>

=

@绑定是col-attr="{{color}}",而=绑定是bg-color="color".一个是"{{color}}",一个是"color".

<!DOCTYPE html>

<html ng-app="dirAppModule">

<head>

  <title></title>

  <meta charset="utf-8">

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

  <script type="text/ng-template" id="text.html">

    <div>

      <h3 style="color:{{text_color}};background-color:{{color}}" ng-transclude></h3>

    </div>

  </script>

  <script>

    var appModule = angular.module('dirAppModule', []);

    appModule.controller('bgColor',function($scope){});

    appModule.directive('cdHello',function(){

        return {

            restrict:'EAC',

            templateUrl:'text.html',

            replace:true,

            transclude:'element',

            scope:{

                color:'=bgColor'

            },

            link:function(scope,ele,attrs,ctrl,trans){

                ele.bind('click',function(){

                    scope.$apply(function(){

                        scope.color = '#C0DCC0'

                    })

                });

                ele.bind('mouseover',function(){

                    ele.css({'cursor':'pointer'})

                });

            }

        }

    });

  </script>

</head>

<body>

  <div ng-controller="bgColor">

    <input ng-model="color" placeholder="请输入颜色值"/>

    <br/>

    <cd-hello bg-color="color"><span>code_bunny</span></cd-hello>

  </div>

</body>

</html>

指令 scope的更多相关文章

  1. AngularJS入门心得4——漫谈指令scope

    上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...

  2. angular : direative : scope | 指令scope和transclude的关系

    今天记入的是指令的scope和transclude关系 a 和 b 都是指令 <div a> <div b></div> </div> a transc ...

  3. angularJS自定义指令scope代替link

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. angular : direative : scope | 指令scope里的符号@，=

    先看看以下的代码 <body ng-app="app" ng-controller="ctrl"> <dir myname="nam ...

  5. AngularJS 全局scope与指令 scope通信

    在项目开发时,全局scope 和 directive本地scope使用范围不够清晰,全局scope与directive本地scope通信掌握的不够透彻,这里对全局scope 和 directive本地 ...

  6. angularJS1笔记-(14)-自定义指令(scope)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  7. Angular自定义指令directive:scope属性

    在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...

  8. angularjs指令中scope参数 true、false、{} 的区别详解

    scope 有三个参数 true.false.{} scope 默认是 false,当 scope设置为true时,会从父作用域继承并创建一个新的作用域对象, 按照true .false的反向思维,我 ...

  9. angular学习笔记(三十)-指令(8)-scope

    本篇讲解指令的scope属性: scope属性值可以有三种: 一.scope:false 默认值,这种情况下,指令的作用域就是指令元素当前所在的作用域. 二.scope:true 创建一个继承了父作用 ...

随机推荐

  1. 18_高级映射：一对一查询（使用resultMap）

    [简述] 数据库模型和数据等信息与上一篇博文相同. 需求也同上一篇博文. [工程截图] [User.java]POJO package cn.higgin.mybatis.po; import jav ...

  2. CruiseControl.NET : svnrevisionlabeller

    How to use svnrevisionlabeller as your labeller type in CC.NET: 1. Download ccnet.SvnRevisionLabelle ...

  3. OpenJudge/Poj 1316 Self Numbers

    1.链接地址: http://poj.org/problem?id=1316 http://bailian.openjudge.cn/practice/1316 2.题目: 总时间限制: 1000ms ...

  4. 排序算法FOUR:堆排序HeapSort

    /** *堆排序思路:O(nlogn) * 用最大堆,传入一个数组,先用数组建堆,维护堆的性质 * 再把第一个数与堆最后一个数调换,因为第一个数是最大的 * 把堆的大小减小一 * 再 在堆的大小上维护 ...

  5. javascripct数组

    定义数组 数组对象用来在单独的变量名中存储一系列的值. 我们使用关键词 new 来创建数组对象.下面的代码定义了一个名为 myArray 的数组对象: var myArray=new Array() ...

  6. C语言到底怎么了？

    自2015年11月开始,所有C语言系列都呈现出衰落之势.在超过15年的时间里,C语言在编程语言排行榜中的占比一直有15%-20%,但今年却突然急转直下,目前占比已不足10%,且目前看来回天乏力. 那么 ...

  7. php实现单链表

    <?php /** * 单链表 */ class Demo { private $id; public $name; public $next; public function __constr ...

  8. Starting MySQL.. ERROR! The server quit without updating PID file (/usr/local/mysql/data/localhost.localdomain.pid).

      [root@localhost ~]# cd /usr/local/mysql   [root@localhost mysql]# chown -R mysql.mysql . [root@loc ...

  9. [转]利用/*+Ordered*/提高查询性能

    [转]利用/*+Ordered*/提高查询性能 2009-02-06 10:46:27|  分类: Oracle |  标签: |字号大中小 订阅  消耗在准备利用Oracle执行计划机制提高查询性能 ...

  10. 关于博客名“大话济公”的说明

    其实本来没打算起这个名字的,换了几个名字都被占用了(无语啊...).最近呢,我在研究<济公传>,对于济公的传说比较喜欢,尤其是这个任务,诙谐幽默,同时有时时刻刻在帮助有困难的群众,虽然是个 ...