详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用
对于一个Html5框架的好坏，我们有几个评判标准， 轻量级，可拓展，易复用，速度快。
对组件复用这点，angular以directive的形式展示给开发者，是一个还算不错的选择，作为一个UI组件，必定存在数据交互。
那么数据交互过程中的几个符号我们一定要有所了解，以及他们的区别是什么，防止我们在运用过程中出错。
1. 首先，我们看一scope作用域下面@的使用：
html
<!doctype html>
<html ng-app='myApp'>
<head>
</head>
<body>
<div ng-controller="listCtrl">
<input type="text" ng-model="t" />
<test title="{{t}}" >
<span>我的angularjs</span>
</test>
</div>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="main.js"></script>
</body></html>
js
var myApp=angular.module('myApp',[]);
myApp.controller('listCtrl',function($scope){
$scope.logchore="motorola";
});
myApp.directive('test',function(){
return {
'restrict':'E',
scope:{
title:"@"
},
template:'<div >{{title}}</div>'
}
});
这个必须指定的，这里的title是指令里scope的@对应的，t就是控制域scope下的 .
2. = 的使用。
html
<!doctype html>
<html ng-app='myApp'>
<head>
</head>
<body>
<div ng-controller="listCtrl">
<input type="text" ng-model="t" />
<test title="t" >
<p>{{title}}</p>
<span>我的angularjs</span>
</test>
</div>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="main05.js"></script>
</body></html>
js
var myApp=angular.module('myApp',[]);
myApp.controller('listCtrl',function($scope){
$scope.logchore="motorola";
});
myApp.directive('test',function(){
return {
'restrict':'E',
scope:{
title:"="
},
template:'<div >{{title}}</div>'
}
});
和上面@相比，这个直接赋值等于scope域下的t了
3. 最好我们看看&符号的使用
html
<!doctype html> <html ng-app='myApp'> <head> </head> <body> <div ng-controller="listCtrl"> <test flavor="logchore()" ></test> </div> <script type="text/javascript" src="angular.js"></script> <script type="text/javascript" src="main05.js"></script> </body></html>
js
var myApp=angular.module('myApp',[]);
myApp.controller('listCtrl',function($scope){
$scope.logchore=function(){
alert('ok');
};
});
myApp.directive('test',function(){
return {
'restrict':'E',
scope:{
flavor:"&"
},
template:'<div ><button ng-click="flavor()"></button></div>'
}
});
尝试一下，就明白了，简洁明了！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍详解Vue2.x-directive的学习笔记，包括了详解Vue2.x-directive的学习笔记的使用技巧和注意事项，需要的朋友参考一下 除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。注意，在 Vue2.0 里面，代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。
-
本文向大家介绍详解Django 中是否使用时区的区别，包括了详解Django 中是否使用时区的区别的使用技巧和注意事项，需要的朋友参考一下 起步 在 Django 的模型中新加了一个日期的字段: 同步到数据库时 Django 报出了一个警告： django/db/models/fields/__init__.py:1423: RuntimeWarning: DateTimeField Instan
-
本文向大家介绍再谈PHP中单双引号的区别详解，包括了再谈PHP中单双引号的区别详解的使用技巧和注意事项，需要的朋友参考一下 在PHP中，字符串的定义可以使用英文单引号' ‘，也可以使用英文双引号” “。 但是必须使用同一种单或双引号来定义字符串，如：'Hello World”和”Hello World'为非法的字符串定义。 单引号和双引号到底有啥区别呢？下面通过本文学习一下吧。 1、定义字符串
-
本文向大家介绍详谈python中冒号与逗号的区别，包括了详谈python中冒号与逗号的区别的使用技巧和注意事项，需要的朋友参考一下 注意if\while\for等(或函数定义)语句在结尾处包含一个冒号——我们通过它告诉python下面跟着一个语句块。 --------------冒号的用法 我们在print语句的结尾使用了一个 逗号 来消除每个print语句自动打印的换行符。这样做有点难看，不过确
-
本文向大家介绍c#中(&&,||)与(&,|)的区别详解，包括了c#中(&&,||)与(&,|)的区别详解的使用技巧和注意事项，需要的朋友参考一下 对于(&&,||)，运算的对象是逻辑值，也就是True/False &&相当与中文的并且，||相当于中文的或者 。（叫做逻辑运算符又叫短路运算符） 运算结果只有下列四种情况。 True && True = True （左边为true，再验证右
-
本文向大家介绍MyBatis中#号与美元符号的区别，包括了MyBatis中#号与美元符号的区别的使用技巧和注意事项，需要的朋友参考一下 #{变量名}可以进行预编译、类型匹配等操作，#{变量名}会转化为jdbc的类型。 假设id的值为12，其中如果数据库字段id为字符型，那么#{id}表示的就是'12'，如果id为整型，那么id就是12，并且MyBatis会将上面SQL语句转化为jdbc的selec