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 相关文章推荐
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
Js 刷新框架页的代码
Apr 13 Javascript
JQuery触发事件例如click
Sep 11 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
js表单登陆验证示例
Oct 19 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 Javascript
详解关于Vue单元测试的几个坑
Apr 26 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
如何去掉文章里的 html 语法
2006/10/09 PHP
PHP与MySQL交互使用详解
2006/10/09 PHP
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
List the UTC Time on a Computer
2007/06/11 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
js的一些常用方法小结
2011/06/29 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
Python遍历pandas数据方法总结
2018/02/09 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
python爬取哈尔滨天气信息
2018/07/14 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
工作作风懒散检讨书
2014/10/29 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
幼儿教师辞职信
2015/02/27 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
高中数学教学反思范文
2016/02/18 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
redis lua限流算法实现示例
2022/07/15 Redis
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL