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属性的使用. &, <, =, @ 符 ...
随机推荐
- dom4j api 详解
1.DOM4J简介 DOM4J是 dom4j.org 出品的一个开源 XML 解析包.DOM4J应用于 Java 平台,采用了 Java 集合框架并完全支持 DOM,SAX 和 JAXP. DOM4J ...
- Linux IO操作——RIO包
1.linux基本I/O接口介绍 ssize_t read(int fd, void *buf, size_t count); ssize_t write(int fd, void *buf, siz ...
- 图像jpeg压缩
图像分割 8X8 颜色空间转换RGB->YCbCr 3个8X8的矩阵 离散余弦变换:(Discrete cosine transform),简称DCT. DCT转换后的数组中第一个是一个直线数据 ...
- Java Base64解析
最近在业务场景中,需要对第三方传递进来的字符进行base64解密,根据第三方文档提供的解析工具,对数据进行了解析,关于Base64的解析方式如下: String sign = "xxxxxx ...
- 第一只python爬虫
import urllib.request response = urllib.request.urlopen("http://www.baidu.com") html = res ...
- Alcor(安国)AU6387量产修复（u盘修复）
2010年买的U盘,自从去年坏掉一直没有用. 今天试着把它修理的心态,看看能修好不能.不料真的被我搞好了. 下面是教程链接 如果你的芯片跟我的一样,我人品保证你可以成功. 如果你看教程之后量产 成功, ...
- 只有ReflectionOnlyLoadFrom才可以拯救与GAC冲突的强命名程序集
先说结论,如果有两个拥有相同程序集名称的强命名程序集,一个在GAC里,一个不在.怎样动态加载那个不在GAC里的程序集?答案就是只有Assembly.ReflectionOnlyLoadFrom才可以加 ...
- php strtok()函数用法，及使用时遇到的问题
strtok()函数:用来将一段字符串分割为子字符串 strtok(string $str, string $token) strtok( string $token) //仅第一次调用$str,以后 ...
- C#中对文件的操作小结
1.建立一个文本文件 public class FileClass { public static void Main() { WriteToFile(); } static void WriteTo ...
- js事件委托和jQuery事件绑定on , off , one , bind , unbind , die
一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...