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><div my-directive aa="xxfunction(arg1, arg2,......)"></div></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属性的使用. &, <, =, @ 符 ...
随机推荐
- 获取一个Assembly中的命名空间列表
通过System.Reflection.Assembly类中提供的方法和属性不能直接获取组件中的命名空间列表.但有方法可以直接获得Assembly中的所有类型,我们便可以通过获取的类型来得到命名空间名 ...
- 关于TextView的一些初步解说
Android里面的textview是一个相当重要的类.相信做安卓的开发人员在每一个应用里面都一定用到了它,而且它也是Button,EditTextView等子控件的父类. 对于View的流程:mea ...
- 基础-Eclipse 教程
1.Eclipse 是一个开放源代码的.基于 Java 的可扩展开发平台.2.下载地址为: https://www.eclipse.org/downloads/.3.Eclipse 修改字符集 : W ...
- 高质量JavaScript代码
才华横溢的Stoyan Stefanov,在他写的由O’Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会 ...
- java关于Timer schedule执行定时任务 !!!!!!!!!
1.在应用开发中,经常需要一些周期性的操作,比如每5分钟执行某一操作等.对于这样的操作最方便.高效的实现方式就是使用java.util.Timer工具类. private java.util.Time ...
- hdu3625(第一类斯特林数)
与第二类有些区别! #include <stdio.h> #include <stdlib.h> #include <string.h> #include < ...
- mysql返回字符串在另外一个字符串中第n次出现的方法。
SELECT SUBSTRING_INDEX("迟到50分钟,早退15分钟","分钟",2); 返回:迟到50分钟,早退15
- zookeeper基本概念及原理
zookeeper是一个分布式的,开源的分布式应用程序,该程序主要用于管理其他分布式应用程序.其他分布式应用程序可以基于zookeeper实现数据同步,配置维护和命名服务等等.zookeeper是Ha ...
- mysql中排序
排序(默认:asc升序; desc降序 如:根据成绩从高到低排序 select * from stu_info order by mark desc; 根据成绩从低到高排序 select * from ...
- c# + Sql server 事务处理
事务(Transaction)是并发控制的单位,是用户定义的一个操作序列.这些操作要么都做,要么都不做,是一个不可分割的工作单位. 通过事务,SQL Server能将逻辑相关的一组操作绑定在一起,以便 ...