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 相关文章推荐
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
js异常捕获方法介绍
Apr 10 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
AngularJS中filter的使用实例详解
Aug 25 Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
webpack external模块的具体使用
Mar 10 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 Javascript
javascript实现固定侧边栏
Feb 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实现购物车功能(上)
2020/07/23 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
用js遍历 table的脚本
2008/07/23 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
Python对excel文档的操作方法详解
2018/12/10 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
Python远程linux执行命令实现
2020/11/11 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
房地产销售大学生自我评价分享
2013/11/11 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
离婚协议书范本样本
2014/08/19 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
悬空寺导游词
2015/02/05 职场文书
物资采购管理制度
2015/08/06 职场文书
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS