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属性的使用. &, <, =, @ 符 ...
随机推荐
- Java实现验证码的制作
验证码概述 为什么使用验证码? 验证码(CAPTCHA)是一种全自动程序.主要是为了区分“进行操作的是不是人”.如果没有验证码机制,将会导致以下的问题: 对特定网站不断进行登录,破解密码: 对某个网站 ...
- 【Raspberry Pi】修改时区
Raspberry Pi没有时钟模块,所以每次断电都会丢失时间,但它有联网获取时间的预设.但要修改默认时区 http://outofmemory.cn/code-snippet/2899/shumei ...
- 用python解析html--SGMLParser
sgmllib.py 包含一个重要的类: SGMLParser.SGMLParser 将 HTML 分解成有用的片段, 比如开始标记和结束标记.一旦它成功地分解出某个数据为一个有用的片段,它会根据 所 ...
- 你很熟悉CSS，却没掌握这些CSS技巧
转载来自 http://www.html5cn.org/article-9294-1.html 做前端开发的人都很熟悉CSS,一个漂亮的网页由HTML标签和控制这些标签布局的CSS组成,因此CSS在开 ...
- hdu 4289(最小割）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4289 思路:求最小花费,最小割应用,将点权转化为边权,拆点,(i,i+n)之间连边,容量为在城市i的花 ...
- style标签进行实时编辑及修改css(转)
心得: style也是一个标签,那么也可以使用css对其进行编辑 html5新属性 contenteditable,可以让标签元素处于可编辑状态,对于style标签也适用 为了不影响head标签里的s ...
- C语言必掌握知识点
个人总结,学c的赶快看 1-.++a 和 a++ 的差别: ++a 先加在赋值 a++ 先赋值在加 后者赋给变量b的值为a而不是a+1后的值 2-.按位与 同为1时为1,其 ...
- JZOJ.5236【NOIP2017模拟8.7】利普希茨
Description
- vue父子组件传值
1.父组件向子组件传值 例如app.vue是父组件,v-header.vue是子组件,实现app向v-header传值父组件需要自定义自己的title值, 子组件v-header内容 <temp ...
- android studio 运行是，app标题栏不显示
解决办法:让所有的活动都继承 AppCompatActivity就行了,如: public class FirstActivity extends AppCompatActivity{ ... }