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操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
js判断是否是手机页面
Mar 17 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 Javascript
js实现弹幕飞机效果
Aug 27 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/03/03 欧美动漫
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
PHP常用数组函数介绍
2014/07/28 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
详解Python中heapq模块的用法
2016/06/28 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
Python3常用内置方法代码实例
2019/11/18 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
Spy++的使用方法及下载教程
2021/01/29 Python
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
2014年青年志愿者工作总结
2014/12/09 职场文书
525心理健康活动总结
2015/05/08 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
追悼会家属答谢词
2015/09/29 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB