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 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
JavaScript删除指定子元素代码实例
Jan 13 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
js实现网页多级级联菜单代码
Aug 20 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
react-router中的属性详解
Jun 01 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
Vue数字输入框组件使用方法详解
Feb 10 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 &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
python可迭代对象去重实例
2020/05/15 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
新员工入职感言
2014/02/01 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
公务员处分决定书
2015/06/25 职场文书
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL