AngularJs1.x自定義指令獨(dú)立作用域的函數(shù)傳入?yún)?shù)方法

更新時(shí)間：2018年10月09日 09:52:46 作者：meloseven

今天小編就為大家分享一篇AngularJs1.x自定義指令獨(dú)立作用域的函數(shù)傳入?yún)?shù)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

在定義指令的scope屬性如果設(shè)置成了{(lán)}，那就成為了一個(gè)獨(dú)立作用域，如果要傳入一個(gè)方法，使用&,但是這里的傳參有點(diǎn)不一樣。

先看下官網(wǎng)解釋：

& 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}).

這里有個(gè)例子：

<!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自定義指令獨(dú)立作用域的函數(shù)傳入?yún)?shù)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)手風(fēng)琴菜單代碼
這篇文章主要介紹了Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)手風(fēng)琴菜單的相關(guān)資料,需要的朋友可以參考下
2016-04-04
在 Angular2 中實(shí)現(xiàn)自定義校驗(yàn)指令（確認(rèn)密碼）的方法
這篇文章給大家探索 Angular 2 內(nèi)建的自定義驗(yàn)證，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下
2017-01-01
基于AngularJS拖拽插件ngDraggable.js實(shí)現(xiàn)拖拽排序功能
ngDraggable.js是一款比較簡(jiǎn)單實(shí)用的angularJS拖拽插件，借助于封裝好的一些自定義指令，能夠快速的進(jìn)行一些拖拽應(yīng)用開(kāi)發(fā)。本文先從基本概念入手，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2019-04-04
AngularJs定時(shí)器$interval 和 $timeout詳解
這篇文章主要介紹了AngularJs定時(shí)器$interval 和 $timeout詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
淺談Angular的12個(gè)經(jīng)典問(wèn)題
Angular作為目前最為流行的前端框架，受到了前端開(kāi)發(fā)者的普遍歡迎。不論是初學(xué)Angular的新手，還是有一定Angular開(kāi)發(fā)經(jīng)驗(yàn)的開(kāi)發(fā)者，了解本文中的12個(gè)經(jīng)典面試問(wèn)題，都將會(huì)是一個(gè)深入了解和學(xué)習(xí)Angular2的知識(shí)概念的絕佳途徑。
2021-05-05
AngularJs中route的使用方法和配置
angular是Google開(kāi)發(fā)的一個(gè)單頁(yè)面應(yīng)用框架,是現(xiàn)在比較主流的單頁(yè)面應(yīng)用框架之一，下面通過(guò)本文給大家介紹AngularJs中route的使用方法和配置，感興趣的朋友一起學(xué)習(xí)吧
2016-02-02
AngularJS獲取json數(shù)據(jù)的方法詳解
這篇文章主要介紹了AngularJS獲取json數(shù)據(jù)的方法,結(jié)合實(shí)例形式詳細(xì)分析了AngularJS獲取json數(shù)據(jù)的詳細(xì)步驟、操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2017-05-05
詳解如何為你的angular app構(gòu)建一個(gè)第三方庫(kù)
這篇文章主要介紹了詳解如何為你的angular app構(gòu)建一個(gè)第三方庫(kù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
AngularJS基礎(chǔ) ng-focus 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-focus 指令,這里整理了ng-focus的一些基礎(chǔ)資料,并附一個(gè)實(shí)例代碼,有需要的小伙伴參考下
2016-08-08
AngularJS 霸道的過(guò)濾器小結(jié)
本篇文章主要介紹了AngularJS 霸道的過(guò)濾器小結(jié)，在實(shí)際操作中，我們需要對(duì)統(tǒng)一數(shù)據(jù)源進(jìn)行多次轉(zhuǎn)換，本文詳細(xì)討論有關(guān)過(guò)濾器的用法。
2017-04-04