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属性的使用. &, <, =, @ 符 ...
随机推荐
- kafka 安装步骤
kafka安装文档 1.解压缩(官网下载:http://kafka.apache.org/downloads.html) tar -xzf kafka_2.10-0.8.2.0.tgz cd kafk ...
- CSS-微信开放UI样式
下面的链接是微信开放的CSS的样式: http://weui.github.io/weui/ 附上GitHub地址:https://github.com/weui/weui
- python 清华镜像pip install
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple
- css 横线中间添加文字
demoline01.02选一个用足够了 <style> .demo_line_01 { width: 200px;/*这指的是文字的宽度*/ padding: 0 20px 0; m ...
- ralink雷灵RT5370 for mac ox 10.8 驱动
博主2013年一月份安装了黑苹果发现 1000BGN 这斯全球无解. 在多米网上买了个 ralink5370 芯片的网卡.结果好多时候,总是闪退纠结ing 最后找到在官网上找到一个驱动. 目测网速还可 ...
- Flutter入门之有状态组件
StatefulComponent使用方法入门 在上一篇Flutter入门之无状态组件中我们讲到了无状态组件,所谓的无状态组件指的就是其内部的状态是来自其父组件并使用final类型的变量来存储,当组件 ...
- HDU 5677 ztr loves substring（回文串加多重背包）
ztr loves substring Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Othe ...
- maven的核心概念
1 简单的核心概念 1.1 坐标 groupId.artifactId.version,很简单,这三个坐标定位到了该依赖的位置,有了它们就可以下载该依赖了. 1.2 依赖 如果一个jar包使用了另外一 ...
- 找不到Microsoft Access Driver(*.mdb)ODBC驱动程序的安装例程。请重新安装驱动
按照教材创建的方法:“控制面板-管理工具-数据源(ODBC)”,打开“ODBC数据源管理器”窗口,然后“添加”,打开“创建新数据源”的窗口,最后选择Microsoft Access Driver(*. ...
- python基础之类的继承与派生、组合、接口与归一化设计、抽象类、子类中调用父类方法
一.什么是继承 继承是一种创建新的类的方式,新建的类可以继承自一个或者多个父类,原始类称为基类或超类,新建的类称为派生类或子类. 派生:子类继承了父类的属性,然后衍生出自己新的属性,如果子类衍生出的新 ...