AngularJs1.x自定義指令獨(dú)立作用域的函數(shù)傳入?yún)?shù)方法
在定義指令的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è)參考，也希望大家多多支持腳本之家。
- javascript自定義日期比較函數(shù)用法示例
- JS中創(chuàng)建自定義類型的常用模式總結(jié)【工廠模式,構(gòu)造函數(shù)模式,原型模式,動(dòng)態(tài)原型模式等】
- JS自定義函數(shù)實(shí)現(xiàn)時(shí)間戳轉(zhuǎn)換成date的方法示例
- JavaWeb開發(fā)之JSTL標(biāo)簽庫的使用、 自定義EL函數(shù)、自定義標(biāo)簽（帶屬性的、帶標(biāo)簽體的）
- js document.getElementsByClassName的使用介紹與自定義函數(shù)
- 自定義require函數(shù)讓瀏覽器按需加載Js文件
- 常用原生js自定義函數(shù)總結(jié)
- JS自定義函數(shù)對(duì)web前端上傳的文件進(jìn)行類型大小判斷
- PHP自定義函數(shù)格式化json數(shù)據(jù)示例
- 詳解JavaScript自定義函數(shù)
相關(guān)文章
延遲加載是一種限制加載用戶當(dāng)前需要的模塊的方法,這可以提高應(yīng)用程序的性能并減小初始捆綁包大小,在本文中,您學(xué)習(xí)了如何在 Angular 應(yīng)用程序中使用惰性加載路由,本文分步驟講解的非常詳細(xì),感興趣的朋友一起看看吧2024-02-02
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
ng-template 是用來定義模板的，當(dāng)使用ng-template定義好一個(gè)模板之后，可以用ng-container和templateOutlet指令來進(jìn)行使用。這篇文章給大家介紹了Angular中的ng-templateangular及使用 ngTemplateOutlet 指令的方法，需要的朋友參考下吧2018-08-08
本篇文章主要介紹了說說AngularJS中的$parse和$eval的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
AngularJs 終極購(gòu)物車(實(shí)例講解)
下面小編就為大家?guī)硪黄狝ngularJs 終極購(gòu)物車的實(shí)例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
Angular outlet實(shí)現(xiàn)頁面布局示例詳解
這篇文章主要為大家介紹了Angular outlet實(shí)現(xiàn)頁面布局示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
使用Chrome瀏覽器調(diào)試AngularJS應(yīng)用的方法
這篇文章主要介紹了使用Chrome瀏覽器調(diào)試AngularJS應(yīng)用的方法,AngularJS是非常熱門的JavaScript庫,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了angular2 NgModel模塊的具體使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
angular實(shí)現(xiàn)IM聊天圖片發(fā)送實(shí)例
本篇文章主要介紹了angular實(shí)現(xiàn)IM聊天圖片發(fā)送實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
Angular通過?HTTP?Interceptor?實(shí)現(xiàn)?HTTP?請(qǐng)求超時(shí)監(jiān)控的例子
這篇文章主要介紹了Angular?如何通過?HTTP?Interceptor?實(shí)現(xiàn)?HTTP?請(qǐng)求的超時(shí)監(jiān)控,本文通過例子給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
在AngularJS中$interval用來處理間歇性處理一些事情,接下來通過本文給大家介紹AngularJS中$interval的用法，需要的朋友參考下2016-02-02