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 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
js实现日期级联效果
Jan 23 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 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 编写大型网站问题集
2010/05/07 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
python访问类中docstring注释的实现方法
2015/05/04 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
python处理RSTP视频流过程解析
2020/01/11 Python
python读写文件write和flush的实现方式
2020/02/21 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
《黄河颂》教学反思
2014/02/07 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
话题作文之呼唤
2019/12/18 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers