AngularJs1.x自定義指令獨立作用域的函式傳入引數

阿新 • • 發佈：2019-01-02

在定義指令的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自定義指令獨立作用域的函式傳入引數

在定義指令的scope屬性如果設定成了{}，那就成為了一個獨立作用域，如果要傳入一個方法，使用&,但是這裡的傳參有點不一樣。先看下官網解釋： & or &attr - p

vue2自定義指令的作用

自定義指令是用來操作DOM的。儘管Vue推崇資料驅動檢視的理念，但並非所有情況都適合資料驅動。自定義指令就是一種有效的補充和擴充套件，不僅可用於定義任何的DOM操作，並且是可複用的。　　比如谷歌圖片的載入做得非常優雅，在圖片未完成載入前，用隨機的背景色佔位，圖片載入完

angularjs 1.x自定義指令之控制器與指令間的通訊

一、在指令中呼叫控制器裡定義的方法 //html <div ng-controller="MyCtrl"> <loader howToLoad="loadData

angularJS1筆記-(10)-自定義指令(templateUrl屬性)

clas angular ima 追加 set provider black text rep index.html: <!DOCTYPE html> <html lang="en"> <head> <meta chars

angular創建自定義指令的四種方式

htm mil 成功評論 utf-8 例如 angularjs size 限制　　angular除了內置的部分指令，還可以通過.directive來自定義指令。要調用自定義指令，HTML 元素上需要添加自定義指令名。使用駝峰法來命名一個指令：nsHeader，在調用時使

angular 自定義指令詳解--restrict、restrict、replace

emp bold span 類型 ret space con 設置註意 Angularjs 允許根據實際業務需要自定義指令, 通過angular全局對象下的 directive 方法實現。可以自定義屬性、自定義標簽、自定義功能接下來定義一個名叫custom的指令，並利用

Angular-自定義指令-下

接下來 -h 模塊 use 相互讓我 model too 服務自定義指令學習有段時間了，學了些紙上談兵的東西，還沒有真正的寫個指令出來呢。。。所以，隨著學習的接近尾聲，本篇除了介紹剩余的幾個參數外，還將動手結合使用各參數，寫個真正能用的指令出來玩玩。　　我們在自定義指

Cordova6.x自定義插件之Andorid

and mage cnblogs 目錄 rdo feature detail .cn sse 1.繼承了CordovaPlugin的Java Class 需要重寫execute方法，如下： 2.在res/xml/config.xml中關聯上述java class 3

angualar入門學習-- 自定義指令指令編譯執行過程

監聽監聽器註冊 sco lar scl $watch 學習排序 3個階段：一、加載階段加載angular.js的源碼，找到ng-app確定應用邊界範圍。二、編譯階段 compile 查找所有指令，保存在一個列表中對所有指令按優先級（property屬性值）排序

angular 自定義指令詳解 Directive

聲明其他原型繼承創建 tool 兩個模板變化組合廢話不多說，下面就直接上代碼 //angular指令的定義，myDirective ，使用駝峰命名法 angular.module(‘myApp‘, []) .directive(‘myDirective‘,

AngularJs自定義指令詳解（5） - link

演示 hang cursor off drag font 雙向事件 date 在指令中操作DOM，我們需要link參數，這參數要求聲明一個函數，稱之為鏈接函數。寫法： link: function(scope, element, attrs) {　　// 在這裏操作DO

AngularJs學習筆記（4）——自定義指令

ref 告訴 ack 生命周期 .com bsp ctrl 參數變量 ng- 對指令的第一印象：它是一個自定義標簽！先來看一個簡單的指令： <!doctype html> <html ng-app="myApp"> <head>

SpringMvc4.x---自定義HttpMessageConverter

bsp 定義 app nbsp res convert esp 大量 response 消息轉換器HttpMessageConverter是用來處理request和response裏面的數據的。Spring為我們內置了大量的HttpMessageConverter，例如，M

vue怎麽自定義指令？？

相差 name value self upd 使用插入參數 dom節點最近看看vue中自定義指令，感覺vue的指令和angular1的指令相差較大 <script> //指令鉤子函數： /* bind 只調用一次，指

angular指令詳解--自定義指令

修飾 cor ring ttr 子元素標簽常用文本利用自定義指令 directive()這個方法是用來定義指令的： angular.module(‘myApp‘, []) .directive(‘myDirective‘, function ($timeout,

vue(2) - 自定義指令

asc color true dom this == ont ron 指令我們都知道v-for、v-html、等等都是指令：擴展html 語法自定義指令：屬性指令 Vue.deirctive(指令名稱，function(){ 　　this.el ==>原生的do

Vue 自定義指令練習

otto inpu function pin alert check 自定義 asc rip Vue.directive(id,definition)註冊一個全局自定義指令，接收兩個參數，指令ID以及定義對象取值： <div v-demo="{ color: ‘

angularJS中如何寫自定義指令

module ren gif 發送郵件 www amp 提前 ras instance 指令定義 (轉自http://www.cnblogs.com/huangshikun/p/7060787.html) 對於指令,可以把它簡單的理解成在特定DOM元素上運行的函數,指令

freemarker實現自定義指令和自定義函數

數據 dir variables macro 內置引擎 eem fig turn 自定義指令： 1.指令在前臺實現　　<#macro name param1,param2,param3...paramN> 　　</#macro> 2.指令在後臺實

vue自定義指令的創建和使用

clas 參數 -h 操作 this text 等於指定 function 一、自定義指令的創建和使用 Vue自帶的指令很多，v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text...但是

AngularJs1.x自定義指令獨立作用域的函式傳入引數

相關推薦