AngularJs1.x自定义指令独立作用域的函数传入参数方法


Posted in Javascript onOctober 09, 2018

在定义指令的scope属性如果设置成了{},那就成为了一个独立作用域,如果要传入一个方法,使用&,但是这里的传参有点不一样。

先看下官网解释:

& or &attr - provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given and widget definition of scope: { localFn:'&myAttr' }, then isolate scope property localFn will point to a function wrapper for the count = count + value expression. Often it's desirable to pass data from the isolated scope via an expression and to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22}).

这里有个例子:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<body ng-app="app1">
<div ng-controller="MyCtrl">
 <div ng-repeat="item in items" my-component isolated-expression-foo="updateItem(item,temp)">
 {{item|json}}
 </div>
</div>
</body>
<script src="../scripts/angular.js"></script>
<script>
 var myModule = angular.module('app1', [])
 .directive('myComponent', function () {
 return {
 restrict:'A',
 scope:{
 isolatedExpressionFoo:'&'
 },
 link:function(scope,element,attr) {
 scope.isolatedExpressionFoo();
 }
 };
 })
 .controller('MyCtrl', ['$scope', function ($scope) {
 $scope.items=[{id:1,value:"test"},{id:2,value:"TEst2"}];
 $scope.updateItem = function (item,temp) {
 console.log("Item param "+item.id);
 console.log("temp param " + temp);
 }
 }]);

</script>
</html>

以上这篇AngularJs1.x自定义指令独立作用域的函数传入参数方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 函数对象的多重身份
Jun 28 Javascript
基于JQuery的日期联动实现代码
Feb 24 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 Javascript
JS正则表达式常见函数与用法小结
Apr 13 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 #Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 #Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 #Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 #Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 #Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 #Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 #Javascript
You might like
php在线生成ico文件的代码
2007/10/09 PHP
实用函数7
2007/11/08 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
跟老齐学Python之print详解
2014/09/28 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
python实现12306火车票查询器
2017/04/20 Python
Python2包含中文报错的解决方法
2018/07/09 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
python plotly绘制直方图实例详解
2019/07/22 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
毕业生造价工程师求职信
2013/10/17 职场文书
最新党员思想汇报
2014/01/01 职场文书
一分钟演讲稿
2014/04/30 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS