angularjs中directive声明scope对象的用法

总的来说用法分三种：

》1： scope: false --> 继承父域，实现双向数据绑定

示例代码可自测：

<!DOCTYPE html>

<html lang="en" ng-app="myApp">

<head>

    <meta charset="UTF-8">

    <title>directive属性 scope:{}</title>

</head>

<body ng-controller="mainCtrl">

    <p>scope：false  --> 继承父域，实现 双向数据绑定</p>

    姓名：<input type="text" name="" ng-model="myName">

    年龄：<input type="text" name="" ng-model="myAge">

    性别：<input type="text" name="" ng-model="mySex" >

    <div my-directive name="myName" this-is-age="myAge" sex="mySex" say-words="say(arg)"></div>

    <script type="text/javascript" src="../../../../lib/jquery/v1.10.2/jquery.min.js"></script>

    <script type="text/javascript" src="../../js/angular-v1.4.6.min.js"></script>

    <script type="text/javascript">

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

        // mainCtrl

        myApp.controller('mainCtrl', mainController);

        // myDirective

        myApp.directive('myDirective', myDirective )

        // main controller

        function mainController($scope){

            $scope.myName = 'jcy';

            $scope.myAge = '22';

            $scope.mySex = 'male';

            $scope.info = '想知道我的个人信息吗，不告诉你。。。';

            $scope.say = function(arg){

                alert(arg);

            }

        };

        // my directive

        function myDirective(){

             return {

                scope: false, // {} = isolate, true = child, false/undefined = no change

                restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment

                template: '<div>'+

                          '<button>我要说话</button>'+

                          '<p>'+

                            '姓名：<input type="text" name="" ng-model="myName">'+

                            '年龄：<input type="text" name="" ng-model="myAge">'+

                            '性别：<input type="text" name="" ng-model="mySex" > <br>'+

                            '介绍1：<span ng-bind="info"></span><br>'+

                            '介绍2：<span>{{info}}</span>'+

                            '</p>'+

                          '</div>',

                link: function($scope, iElm, iAttrs, controller) {

                    $(iElm).on('click','button',function(e){

                        var words = '注意这个传值方式哦' ;

                        $scope.say( { arg:words } );

                    });

                }

            };

        }

    </script>

</body>

</html>

》2： scope: true -->

初始化，继承父域；

子域属性值没有发生改变前，可实现单向数据绑定（父变 --> 子变）；

子域属性值发生改变后，实现子域与发父域隔离（父变 --> 子不变）;

示例代码可自测：

<!DOCTYPE html>

<html lang="en" ng-app="myApp">

<head>

    <meta charset="UTF-8">

    <title>directive属性 scope:{}</title>

</head>

<body ng-controller="mainCtrl">

    <p>scope：true  --> 初始化，继承父域；

                        子域属性值没有发生改变前，可实现 单向数据绑定（父变 --> 子变）；

                        子域属性值发生改变后，实现子域与发父域隔离（父变 --> 子不变）</p>

    姓名：<input type="text" name="" ng-model="myName">

    年龄：<input type="text" name="" ng-model="myAge">

    性别：<input type="text" name="" ng-model="mySex" >

    <div my-directive name="myName" this-is-age="myAge" sex="mySex" say-words="say(arg)"></div>

    <script type="text/javascript" src="../../../../lib/jquery/v1.10.2/jquery.min.js"></script>

    <script type="text/javascript" src="../../js/angular-v1.4.6.min.js"></script>

    <script type="text/javascript">

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

        // mainCtrl

        myApp.controller('mainCtrl', mainController);

        // myDirective

        myApp.directive('myDirective', myDirective )

        // main controller

        function mainController($scope){

            $scope.myName = 'jcy';

            $scope.myAge = '22';

            $scope.mySex = 'male';

            $scope.info = '想知道我的个人信息吗，不告诉你。。。';

            $scope.say = function(arg){

                alert(arg.arg);

            }

        };

        // my directive

        function myDirective(){

             return {

                scope: true, // {} = isolate, true = child, false/undefined = no change

                restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment

                template: '<div>'+

                          '<button>我要说话</button>'+

                          '<p>'+

                            '姓名：<input type="text" name="" ng-model="myName">'+

                            '年龄：<input type="text" name="" ng-model="myAge">'+

                            '性别：<input type="text" name="" ng-model="mySex" > <br>'+

                            '介绍1：<span ng-bind="info"></span><br>'+

                            '介绍2：<span>{{info}}</span>'+

                            '</p>'+

                          '</div>',

                link: function($scope, iElm, iAttrs, controller) {

                    $(iElm).on('click','button',function(e){

                        var words = '这是要测试 scope绑定函数，并且给函数传值的方式' ;

                        $scope.say( { arg:words } );

                    });

                }

            };

        }

    </script>

</body>

</html>

》3：

scope 的绑定方式：“@”、“=”、“&”

绑定的名称：要全为小写中间可用 “-” 符号连接, 绑定到到 scope中时，去掉“-”，并将“-”后第一个字符改为大写,驼峰式命名

scope 绑定方式的区别：

“=”：指令中的属性取值为controller中对应$scope上属性的取值，可用于双向数据的绑定.

“@”：

1.指令中的取值为html中的字面量/直接量. 即：attr="xxx"时，"@attr"形式得到的是 “xxx”字符串；

2.绑定 controller中的$scope property. 即：arrt="{{xxx}}",或者其它绑定$scope.property时，“@attr"形式得到的是$scope.property。

可用于单向数据绑定。父（改变）-->子（改变），子（改变）-->父（不改变）。

“&”：指令中的取值为Contoller中对应$scope上的属性，但是这属性必须为一个函数回调。

当为"func:&aa"时,传值方式 $scope.func({ arg1:"xxx", arg2:"xxxx", .... }), html如 <div my-directive aa="xxfunction(arg1, arg2,......)"></div>

示例代码可自测：

<!DOCTYPE html>

<html lang="en" ng-app="myApp">

<head>

    <meta charset="UTF-8">

    <title>directive属性 scope:{}</title>

</head>

<body ng-controller="mainCtrl">

    <p>

        总结：<br>

        scope 的绑定方式：“@”、“=”、“&” <br>

        绑定的名称：要全为小写 中间可用 “-” 符号连接, 绑定到到 scope中时，去掉“-”，并将“-”后第一个字符改为大写,驼峰式命名 <br>

        scope 绑定方式的区别：<br>

          “=”：指令中的属性取值为controller中对应$scope上属性的取值，可用于双向数据的绑定. <br>

          “@”：

                1.指令中的取值为html中的字面量/直接量. 即：attr="xxx"时，"@attr"形式得到的是 “xxx”字符串；<br>

                2.绑定 controller中的$scope property. 即：arrt="{{xxx}}",或者其它绑定$scope.property时，“@attr"形式得到的是$scope.property。

                可用于单向数据绑定。父（改变）-->子（改变），子（改变）-->父（不改变）。<br>

          “&”：指令中的取值为Contoller中对应$scope上的属性，但是这属性必须为一个函数回调。

               当为"func:&aa"时,传值方式 $scope.func({ arg1:"xxx", arg2:"xxxx", .... }), html如 <pre>&lt;div my-directive aa="xxfunction(arg1, arg2,......)"&gt;&lt;/div&gt;</pre> <br>

    </p>

    姓名：<input type="text" name="" ng-model="myName">

    年龄：<input type="text" name="" ng-model="myAge">

    性别：<input type="text" name="" ng-model="mySex" >

    <div my-directive name="myName" this-is-age="myAge" sex="{{mySex}}" say-words="say(arg)"></div>

    <script type="text/javascript" src="../../../../lib/jquery/v1.10.2/jquery.min.js"></script>

    <script type="text/javascript" src="../../js/angular-v1.4.6.min.js"></script>

    <script type="text/javascript">

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

        // mainCtrl

        myApp.controller('mainCtrl', mainController);

        // myDirective

        myApp.directive('myDirective', myDirective )

        // main controller

        function mainController($scope){

            $scope.myName = 'jcy';

            $scope.myAge = '22';

            $scope.mySex = 'male';

            $scope.say = function(arg){

                alert(arg);

            }

        };

        // my directive

        function myDirective(){

             return {

                scope: {

                    name: "=",

                    age: "=thisIsAge",

                    sex: "@",

                    say: "&sayWords"

                }, // {} = isolate, true = child, false/undefined = no change

                restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment

                template: '<div>'+

                          '<button>我要说话</button>'+

                          '<p>'+

                            '姓名：<input type="text" name="" ng-model="name">'+

                            '年龄：<input type="text" name="" ng-model="age">'+

                            '性别：<input type="text" name="" ng-model="sex" >'+

                            '</p>'+

                          '</div>',

                link: function($scope, iElm, iAttrs, controller) {

                    $(iElm).on('click','button',function(e){

                        var words = '这是要测试 scope绑定函数，并且给函数传值的方式' ;

                        $scope.say( { arg:words } );

                    });

                }

            };

        }

    </script>

</body>

</html>

angularjs中directive声明scope对象的用法的更多相关文章

angularjs于directive声明scope说明何时以及如何使用对象修饰符
于angular我们定义directive方法.查看 return { restrict: 'AE', scope: {}, template: '<div></div>', ...
angularJS中directive父子组件的数据交互
angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...
AngularJS中Directive指令系列 - scope属性的使用
文章是转的,我做下补充.原文地址:https://segmentfault.com/a/1190000002773689 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部 ...
angularjs中directive指令与component组件有什么区别？
壹 ❀ 引我在前面花了两篇博客分别系统化介绍了angularjs中的directive指令与component组件,当然directive也能实现组件这点毋庸置疑.在了解完两者后,即便我们知道co ...
angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
AngularJS中Directive指令系列 - 基本用法
参考: https://docs.angularjs.org/api/ng/service/$compile http://www.zouyesheng.com/angular.html Direct ...
angularJS中directive与directive 之间的通信
上一篇讲了directive与controller之间的通信:但是我们directive与directive之间的通信呢? 当我们两个directive嵌套使用的时候怎么保证子directive不会被 ...
AngularJS中Directive间交互实现合成
假设需要烹饪一道菜肴,有3种原料,可以同时使用所有的3种原料,可以使用其中2种,也可以使用其中1种. 如果以Directive的写法,大致是:<bread material1 material2 ...
AngularJS中Directive指令系列
近段时间在研究Angular中的directive用法,打算写个系列.以官方文档为主.并参考诸多教程.加上自己的思考. 基本概念及用法 scope属性的使用. &, <, =, @ 符 ...

随机推荐

第二百一十二节，jQuery EasyUI，Combo(自定义下拉框)组件
jQuery EasyUI,Combo(自定义下拉框)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方 ...
（转）java volatile关键字
转自:http://www.cnblogs.com/aigongsi/archive/2012/04/01/2429166.html 参考:http://blog.csdn.net/imzoer/ar ...
RegDBGetKeyValueEx函数使用报错error 1 numeric value required
参考:http://evely.blog.51cto.com/1089422/1400965 RegDBGetKeyValueEx函数: InstallSheild Script Code 123 ...
AWS系列-申请Redis
1.1 打开aws控制台,可以直接搜索redis 1.2 进入redis控制面板点击启动缓存集群(这个只是启动创建的意思,不是启动下面创建好的node.我也不懂为啥翻译过来是这个意思...) 1.3 ...
【原】eclipse使用技巧之代码编辑器分隔窗口
相信很多使用Intellj IDE的朋友对其split screen功能赞赏有加!其实在eclipse中也可以方便地代码编辑多windows.多views!但是隐藏的有点深,很多朋友不常用到,甚至以为 ...
Spring Security OAuth2 授权失败（401) 问题整理
Spring Cloud架构中采用Spring Security OAuth2作为权限控制,关于OAuth2详细介绍可以参考 http://www.ruanyifeng.com/blog/2014/0 ...
Java基础系列（八）序列化与反序列化
先来看两个例子示例一:将对象保存成字节数组,再把对象的字节数组还原为对象示例中用到的Bean package com.huawei.beans; import java.io.Serializab ...
Oracle数据库模型（OLAP/OLTP）
数据库模型选择数据库模型: 联机事务处理OLTP(on-line transaction processing) OLTP是传统的关系数据库的主要应用,基本的.日常的事务处理.例如银行交易. OLT ...
window下使用mysql，报未定义标识符"SOCKET"
解决方法一: 这个错误是在VC中使用MySQL数据库时出现在mysql_com.h文件中的 my_socket fd; 说明未my_socket未定义,这时只需要在引用mysql.h头文件之前引用# ...
php 正则表达式四，例子
PHP常用正则表达式汇总:http://bbs.php100.com/read-htm-tid-83266.html 1.非空匹配: .+ 2.浮点数匹配: ^\d+.\d{2}$ 3.手机号匹配: ...

angularjs中directive声明scope对象的用法

angularjs中directive声明scope对象的用法的更多相关文章

随机推荐

热门专题