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直接编辑当前cookie的脚本
Sep 14 Javascript
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
javascript递归回溯法解八皇后问题
Apr 22 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
区分vue-router的hash和history模式
Oct 03 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调用JAVA的WebService简单实例
2014/03/11 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
this和执行上下文实现代码
2010/07/01 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
javascript基础知识讲解
2017/01/11 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
jQuery实现带进度条的轮播图
2020/09/13 jQuery
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
详解python之heapq模块及排序操作
2019/04/04 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
Python银行系统实战源码
2019/10/25 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
python如何提升爬虫效率
2020/09/27 Python
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
农村葬礼主持词
2014/03/31 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
导游词之昭君岛
2020/01/17 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
详解php中流行的rpc框架
2021/05/29 PHP
教你一步步实现一个简易promise
2021/11/02 Javascript
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫