详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用


Posted in Javascript onAugust 23, 2017

对于一个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>' 

  } 
});

尝试一下,就明白了,简洁明了!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 #Javascript
最基础的vue.js双向绑定操作
Aug 23 #Javascript
vue组件实现文字居中对齐的方法
Aug 23 #Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 #Javascript
深入理解React中何时使用箭头函数
Aug 23 #Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 #jQuery
JS数组交集、并集、差集的示例代码
Aug 23 #Javascript
You might like
第十二节 类的自动加载 [12]
2006/10/09 PHP
一些关于PHP的知识
2006/11/17 PHP
PHP 学习路线与时间表
2010/02/21 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
简单介绍Ruby中的CGI编程
2015/04/10 Python
Python编程之属性和方法实例详解
2015/05/19 Python
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
计算机系毕业生推荐信
2013/11/06 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
赔偿协议书范本
2014/04/15 职场文书
商场父亲节活动方案
2014/08/27 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
学生党员检讨书范文
2014/12/27 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
大学学生会竞选稿
2015/11/19 职场文书
2016高考寄语集锦
2015/12/04 职场文书
《静夜思》教学反思
2016/02/17 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP