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函数ajax
Aug 20 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
Angular表格神器ui-grid应用详解
Sep 29 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 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全排列递归算法代码
2012/10/09 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
python中有函数重载吗
2020/05/28 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
音乐学个人的自荐书范文
2013/11/26 职场文书
文明礼仪事迹材料
2014/01/09 职场文书
公司中秋节活动方案
2014/02/12 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
学雷锋月活动总结
2014/04/25 职场文书
先进事迹演讲稿
2014/09/01 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
环境卫生标语
2015/08/03 职场文书
纪检部部长竞选稿
2015/11/21 职场文书