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学习笔记之jQuery的DOM操作
Dec 22 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
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 excel类 phpExcel使用方法介绍
2010/08/21 PHP
解析yii数据库的增删查改
2013/06/20 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
Nuxt.js实战和配置详解
2019/08/05 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
详解vue 组件注册
2020/11/20 Vue.js
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
strlen的几种不同实现方法
2013/05/31 面试题
介绍一下write命令
2014/08/10 面试题
商务英语专业求职信
2014/06/26 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript