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自定义指令独立作用域的函数传入参数方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Angular.js与Bootstrap相结合实现手风琴菜单代码
这篇文章主要介绍了Angular.js与Bootstrap相结合实现手风琴菜单的相关资料,需要的朋友可以参考下2016-04-04
在 Angular2 中实现自定义校验指令（确认密码）的方法
这篇文章给大家探索 Angular 2 内建的自定义验证，非常不错，具有参考借鉴价值，需要的朋友参考下2017-01-01
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
ngDraggable.js是一款比较简单实用的angularJS拖拽插件，借助于封装好的一些自定义指令，能够快速的进行一些拖拽应用开发。本文先从基本概念入手，给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2019-04-04
AngularJs定时器$interval 和 $timeout详解
这篇文章主要介绍了AngularJs定时器$interval 和 $timeout详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
Angular作为目前最为流行的前端框架，受到了前端开发者的普遍欢迎。不论是初学Angular的新手，还是有一定Angular开发经验的开发者，了解本文中的12个经典面试问题，都将会是一个深入了解和学习Angular2的知识概念的绝佳途径。2021-05-05
angular是Google开发的一个单页面应用框架,是现在比较主流的单页面应用框架之一，下面通过本文给大家介绍AngularJs中route的使用方法和配置，感兴趣的朋友一起学习吧2016-02-02
这篇文章主要介绍了AngularJS获取json数据的方法,结合实例形式详细分析了AngularJS获取json数据的详细步骤、操作技巧与相关注意事项,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了详解如何为你的angular app构建一个第三方库，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
本文主要介绍AngularJS ng-focus 指令,这里整理了ng-focus的一些基础资料,并附一个实例代码,有需要的小伙伴参考下2016-08-08
本篇文章主要介绍了AngularJS 霸道的过滤器小结，在实际操作中，我们需要对统一数据源进行多次转换，本文详细讨论有关过滤器的用法 。2017-04-04
最新评论