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 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 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
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
php 文章调用类代码
2011/08/11 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
基python实现多线程网页爬虫
2015/09/06 Python
Python制作Windows系统服务
2017/03/25 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
英国在线花园中心:You Garden
2018/06/03 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
制定岗位职责的原则
2013/11/08 职场文书
大课间体育活动方案
2014/03/12 职场文书
临床护理求职信
2014/04/26 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
高中生物教学反思
2016/02/20 职场文书