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 相关文章推荐
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
vue中v-model动态生成的实例详解
Oct 27 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 Javascript
深入详解JS函数的柯里化
Jun 09 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 array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
python tornado微信开发入门代码
2018/08/24 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
一套中级Java程序员笔试题
2015/01/14 面试题
工程现场管理求职自荐信
2013/10/02 职场文书
优秀生推荐信范文
2013/11/28 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
二年级语文教学反思
2014/02/02 职场文书
调查研究项目计划书
2014/04/29 职场文书
求职信怎么写
2014/05/23 职场文书
养成教育经验材料
2014/05/26 职场文书
公司门卫工作职责
2014/06/28 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
法定代表人身份证明书
2014/09/10 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android