详解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 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
js跟随滚动条滚动浮动代码
Dec 31 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
JavaScript闭包原理与用法学习笔记
May 29 Javascript
js实现跳一跳小游戏
Jul 31 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
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
上海无线电三厂简史修改版
2021/03/01 无线电
一个PHP+MSSQL分页的例子
2006/10/09 PHP
PHP 采集获取指定网址的内容
2010/01/05 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
react-router中的属性详解
2017/06/01 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
python操作mysql数据库
2017/03/05 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
python读取Excel表格文件的方法
2019/09/02 Python
python绘制高斯曲线
2021/02/19 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
opencv实现图像几何变换
2021/03/24 Python
小学红领巾中秋节广播稿
2014/01/13 职场文书
师范学院教师自荐书
2014/01/31 职场文书
责任担保书范文
2014/05/21 职场文书
计算机网络专业求职信
2014/06/05 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang