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. ZOJ 3211 Dream City（DP）

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=3374 题目大意:JAVAMAN 到梦幻城市旅游见到了黄金树,黄金树上 ...

  2. [java学习笔记]Hello World那些事

    我们安装和配置好java后,必须得大展拳脚一番,根据国际惯例,第一个程序必须是Hello World,下面我们就看看Hello World的那些事. 1.Hello World的运行 Hello Wo ...

  3. 安卓热更新之Nuwa实现步骤

    安卓热更新之Nuwa实现步骤 最近热更新热修复的功能在安卓应用上越发火热,终于我的产品也提出了相应的需求. 经过两天的研究,搞定了这个功能,在这里还要多谢大神们的博客,大神们的原理分析很到位,不过对于 ...

  4. 【Linux工具】svn命令行使用实例

    引言 网上有这么多介绍 svn 使用的文章,为什么还要写?因为它们深入不浅出,平铺不分类,理论不实际,看完也记不住. 本文先介绍基本用法,后进行实例演练.不求大而全,只求熟练常用,自行用 svn he ...

  5. 对WebClient扩展自动解压缩页面

    WebClient下载压缩网页时出现的全是乱码,可通过扩展来解决这个问题. public class MyWebClient : WebClient { protected override WebR ...

  6. ajax、json一些整理（3）

    写上面那些都是因为对ajax不熟悉 从w3c抄写JS原生ajax的东西补充一些基础 XMLHttpRequest 是 AJAX 的基础. XMLHttpRequest 对象 所有现代浏览器均支持 XM ...

  7. 如何更改Chrome默认的搜索引擎

    1 打开Chrome浏览器之后,点击窗口右上角的图标,在弹出的菜单中点击设置,如图所示: 2  在打开的窗口中,点击管理搜索引擎,如下图所示: 3 在弹出的窗口中,找到百度的搜索引擎或者bing的搜索 ...

  8. CRF图像语义分割

    看了Ladicky的文章Associative Hierarchical CRFs for Object Class Image Segmentation,下载他主页的代码,文章是清楚了,但代码的RE ...

  9. python在linux制作图形界面（snack）

    snack是一个用于在linux制作图形界面(GUI)的模块,该模块由c编写,而且redhat的系统都自带这个模块. 1.获取模块 虽然redhat系统会自带这个模块,但是直接去import snac ...

  10. hdu 2191 珍惜现在，感恩生活 多重背包入门题

    背包九讲下载CSDN 背包九讲内容 多重背包: hdu 2191 珍惜现在,感恩生活 多重背包入门题 使用将多重背包转化为完全背包与01背包求解: 对于w*num>= V这时就是完全背包,完全背 ...