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 相关文章推荐
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
JavaScript ES6 Class类实现原理详解
May 08 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
获取远程文件大小的php函数
2010/01/11 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
php格式文件打开的四种方法
2018/02/24 PHP
js 页面输出值
2008/11/30 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
python语言的优势是什么
2020/06/17 Python
Python创建临时文件和文件夹
2020/08/05 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
python中字典增加和删除使用方法
2020/09/30 Python
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
神路信息Java面试题目
2013/03/31 面试题
房产销售独家委托书范本
2014/10/01 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
党员检讨书范文
2014/12/27 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
为自己工作观后感
2015/06/11 职场文书
小学同学聚会感言
2015/07/30 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
解决redis批量删除key值的问题
2022/03/23 Redis
Python利用capstone实现反汇编
2022/04/06 Python
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python