AngularJs1.x自定义指令独立作用域的函数传入参数方法

在定义指令的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自定义指令独立作用域的函数传入参数方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Angular1.x自定义指令实例详解

    本文实例讲述了Angular1.x自定义指令.分享给大家供大家参考,具体如下: 调用Module.directive方法,传入指令名称和工厂函数,返回一个对象. 指令名称中每个大写字母会被认为是属性名中的一个独立的词,而每个词之间是以一个连字符分隔的. var myApp = angular.module('myApp', []) .directive("unorderedList", function () { return function(scope, element, attr

  • 详解Angularjs 自定义指令中的数据绑定

    有关自定义指令的scope参数,网上很多文章都在讲这3种绑定方式实现的效果是什么,但几乎没有人讲到底怎么使用,本篇希望聊聊 到底怎么用 这个话题. 一. 自定义指令 自定义指令,是 Angularjs 用来实现组件化的方式,相比于 React 和 Vue 的组件化方式,它真的很复杂,自定义指令太重了,它暴露了太多可供定制的参数,以至于普通的开发者完全不知道要用它来做什么而将其束之高阁,毕竟一般的业务逻辑通过controller和service就已经可以完成了. 自定义指令在 Angularjs

  • AngularJS实现自定义指令与控制器数据交互的方法示例

    本文实例讲述了AngularJS实现自定义指令与控制器数据交互的方法.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS自定义指令与控制器数据交互</title> <!-- <script src="http://cdn.bootcss.com/angular.js/1.3

  • AngularJS实现自定义指令及指令配置项的方法

    本文实例讲述了AngularJS实现自定义指令及指令配置项的方法.分享给大家供大家参考,具体如下: AngularJS自定义指令有两种写法: //第一种 angular.module('MyApp',[]) .directive('zl1',zl1) .controller('con1',['$scope',func1]); function zl1(){ var directive={ restrict:'AEC', template:'this is the it-first directi

  • AngularJS中一般函数参数传递用法分析

    AngularJS中一般函数参数传递用法分析

    本文实例讲述了AngularJS中一般函数参数传递用法.分享给大家供大家参考,具体如下: 1. 模型参数 直接使用变量名,不要加引号 <!doctype html> <html ng-app="passAter"> <head> <meta charset="utf-8"/> </head> <body> <div ng-controller="passCtrl">

  • AngularJS创建自定义指令的方法详解

    本文实例讲述了AngularJS创建自定义指令的方法.分享给大家供大家参考,具体如下: 这是一篇译文,来自angular开发者说明的指令.主要面向已经熟悉angular开发基础的开发者.这篇文档解释了什么情况下需要创建自己的指令,和如何去创建指令. 什么是指令 从一个高的层面来讲,指令是angular $compile服务的说明,当特定的标签(属性,元素名,或者注释) 出现在DOM中的时候,它让编译器附加指定的行为到DOM上. 这个过程是很简单的.angular内部有很用这样自带的指令,比如说n

  • AngularJs1.x自定义指令独立作用域的函数传入参数方法

    在定义指令的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

  • 理解Vue2.x和Vue3.x自定义指令用法及钩子函数原理

    理解Vue2.x和Vue3.x自定义指令用法及钩子函数原理

    目录 Vue2.x用法 全局注册 局部注册 使用 钩子函数 钩子函数的参数 Vue3.x用法 全局注册 局部注册 使用 钩子函数 较 Vue2.x 相比, 钩子函数有变化 Vue2.x用法 全局注册 Vue.directive( 指令名, { 自定义指令生命周期 } ) 局部注册 directives: { 指令名, { 自定义指令生命周期 } } 使用 v-指令名: 属性名.修饰符="value值" 钩子函数 bind - 自定义指令绑定到 DOM 后调用. 只调用一次, 注意: 只

  • Vue在自定义指令绑定的处理函数中传递参数

    目录 在自定义指令绑定的处理函数中传递参数 需求背景 方式一:包装函数 方式二:利用动态参数 在自定义指令中的传递参数时value和expression的区别 注意点 总结 在自定义指令绑定的处理函数中传递参数 需求背景 现在需要为自定义指令绑定函数,并且需要向函数中传递参数,类似 v-on="handleFunc(arg1, arg2)". Vue 的指令预期得到的值是一个 JavaScript 表达式,除了 v-on 和 v-for 这两个特殊指令外,其他的指令会自动计算该表达式的

  • Vue自定义指令实现checkbox全选功能的方法

    最近做的一个项目需要用到Vue实现全选功能,参考了一下网上的做法,发现用属性计算的复用性不高,于是选用自定义指令,但网上的做法大多是会对原始数据有一定的格式要求,而且没有返回结果,于是做了改进. 上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id

  • vue 自定义指令自动获取文本框焦点的方法

    HTML: <p><b v-show="show">{{tag}}</b><input v-focus v-model="tag" :hidden="show" type="text"></p> js: 官方例子: directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } } 我的

  • vue中自定义指令（directive）的基本使用方法

    vue中自定义指令（directive）的基本使用方法

    目录 前言 正文 1.全局注册 2.局部注册 3.钩子函数及参数设置 4.灵活用法 (1)动态指令参数 (2)函数简写方式 (3)对象字面量方式 5.使用场景 写在最后 前言 在vue项目中我们经常使用到 v-show ,v-if,v-for等内置的指令,除此之外vue还提供了非常方便的自定义指令,供我们对普通的dom元素进行底层的操作.使我们的日常开发变得更加方便快捷.本文就来总结一下自定义指令的使用方法及常用的场景. 正文 1.全局注册 这里全局注册一个指令,用于使用该指令的元素加一个红色边

  • Qt中简单的按钮槽函数传递参数方法

    目录 Qt按钮槽函数传递参数方法 Qt槽函数的几种用法 通过ui控件添加槽函数 通过connect连接 Qt按钮槽函数传递参数方法 Qt中一个典型的点击按钮触发槽函数的写法是: connect(btn, &QPushButton::clicked, this, &class::func); 当你希望在点击按钮后再向槽函数中传递参数,这种写法就无法做到了. 其原因是槽函数要和信号的参数完全对应,如果修改了传给槽函数的参数,点击按钮的信号就无法处理. 这里给出一个比较简单的传参方法,在信号槽中

  • Vue自定义指令上报Google Analytics事件统计的方法

    发现问题 一般前端开发离不开数据统计,我们经常需要接入统计服务以方便运营,例如现在需要统计一个按钮 <template> <button @click="handleClick" /> </template> <script> export default { methods: { handleClick() { window.alert('button click') } } } </script> 引入 ga 后是这样上报

  • VUE中的自定义指令钩子函数讲解

    VUE中的自定义指令钩子函数讲解

    目录 自定义指令钩子函数 自定义指令 先上官方解释 小贴士 钩子函数运行顺序 自定义指令钩子函数 自定义指令 除了VUE 内置指令外,VUE也支持我们自定义注册指令,分为局部和全局注册 但这些想必大家都不陌生,其中官方API也是写的明明白白 官方API点这里 而且自定义指令也会极大程度上帮助我们日常的编程,但这是很有意思的事情出现了,就是钩子函数,很多老铁都弄不明白这五个函数的具体区别 先上官方解释 bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行一次性的初始化设置. inser

  • AngularJS自定义指令详解（有分页插件代码）

    前言 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 通过 .directive() 函数来添加自定义的指令. 调用自定义指令时,需要在HTMl 元素上添加自定义指令名. 自定义指令命名规则:使用驼峰命名法来命名,即除第一个单词外的首字母需大写.如: myDirective. 在html页面调用该指令时需要以 - 分割,如: my-directive.示例代码: <body ng-app="myApp"> <my-directive><

随机推荐