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. mysql学习笔记5

    phpmyadmin中向数据表中插入新数据 INSERT INTO tb_admin(`table_id`, `table_name`, `table_des`, `table_time`)  VAL ...

  2. 05_例子讲解：rlCollisionDemo.exe

    碰撞检测的例子: "E:\Program Files (x86)\rl-0.6.2\bin\rlCollisionDemo.exe" "E:\Program Files ...

  3. OpenJudge 2803 碎纸机 / Poj 1416 Shredding Company

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

  4. cocos2dx 初探 - VS2012 HELLOWORLD

    最近决定用cocos2dx 来做些试验性的东西,先装了个vs2012 再从网上下了cocos2dx-2.1.4就开工了. 仅是Windows 桌面调试还是很简单的. 上面三个项目源: Hellocpp ...

  5. tomcat 192.168.1.110？不烦吗？

    最近做一个在线播放器,因为要用到网络服务器做在线播放,又不想直接在本地用tomcat做实验,因为没有真实感. so,手边两台电脑,同时连在局域网. 客户端,笔记本,ip1:192.168.1.101 ...

  6. 谈谈我对OAuth的理解

    自己的理解是,OAuth是一种授权标准.   用于为除了用户之外的第三方应用授权,   并且在授权过程中,第三方应用不会接触到用户的任何信息,   授权完成后,第三方应用可访问用户授权范围内的信息. ...

  7. PHP中使用cURL

    1.cURL介绍 cURL 是一个利用URL语法规定来传输文件和数据的工具,支持很多协议,如HTTP.FTP.TELNET等.最爽的是,PHP也支持 cURL 库.本文将介绍 cURL 的一些高级特性 ...

  8. 【分享】 高级Visual Basic 编程 清晰pdf+随书源代码光盘

    搞vb6的可能不多,博客园也大多是.net java,近日在网上找到这本好书,想要成为vb高手,这本书不要错过,学完你会发现win32下,vb6还真是无所不能.可贵的是本书的作者是当时vb6 IDE的 ...

  9. twisted internet.reactor部分 源码分析

    twisted.internet.reactor 是进行所有twisted事件循环的地方. reactor在1个python进程中只能有一个. 在windows下用的是select.linux下epo ...

  10. 一步步学习ASP.NET MVC3 (9)——JsonReslt,JavaScript,@Ajax

    请注明转载地址:http://www.cnblogs.com/arhat 在上一章中,我们讲述了ActionResult的三个子类,非别是EmptyResult,RediretResult和Conte ...