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属性的使用. &, <, =, @ 符 ...
随机推荐
- jQuery中bind函数绑定多个事件
名人名言:道德是真理之花.——雨果 在jQuery中绑定多个事件名称是,使用空格隔开,举例如下: $("#foo").bind("mouseenter mouseleav ...
- java 环境变量classpath的作用
http://www.cnblogs.com/xwdreamer/archive/2010/09/08/2297098.html http://www.cnblogs.com/panxuejun/p/ ...
- node中的require和exports
http://cnodejs.org/topic/4f16442ccae1f4aa270010e9
- GIT 回退出错 Unlink of file 'xx' failed. Should I try again? (y/n) 解决办法
发生过程 回退版本 如果回退版本时 里面有删除或者移动的文件 容易出这个问题 解决方法 git reset --hard 版本号 回退失败了 就 本地工作目录跟版本那个工作目录比较 然后还原修 ...
- [多媒体] m3u8简介
m3u8简介 简介:https://www.jianshu.com/p/426425cad08a RFC:https://tools.ietf.org/html/rfc8216 原理:将视频或音频流分 ...
- sql---字段类型转换，sql获取当前时间
一.字段类型转换 convert(要转换成的数据类型,字段名称)例如 convert(varchar(100),col_name)Convert(int,Order_no) 二.sql获取当前时间 s ...
- 测试一个服务器的性能，客户要求向数据库（Sqlserver2012）内 1000/s（每插入一千条数据） 的处理能力
通过jmeter很简单就可以完成,可以参考我以前的一篇文章<jmeter创建数据库(Sqlserver2012)测试>. 前提条件:一个数据库:test 数据库下面有一张表:user ...
- jquery slibings选取同级其他元素
jquery选取同级其他元素可以使用slibings方法,end方法可以清除之前的链式操作,相当于重新开始. <script type="text/javascript"&g ...
- info 手册
info flex 可以查看flex帮助. h就可以看到相关命令,常用命令已经加粗: x 关闭此帮助窗口. q 一并退出 Info. RET ...
- Gson 解析多层嵌套JSON数据
http://stackoverflow.com/questions/14139437/java-type-generic-as-argument-for-gson