directive的傳值問題(全面解析directive的傳值問題)微信分享例項
(一)開發人員可以使用directive自定義angularjs的指令,定義指令的型別有"A"、"E"、"C"、"EAC",這個過程比較簡單,就不加說明了,當你定義好指令之後,問題來了,你怎麼把html頁面的引數傳入到directive自定義的指令中?下面是我做的方法,相信一定能解決你的困擾。
首先我通過directive建立瞭如下指令:(在這裡注意命名採用駝峰命名法)
(二)上面是定義的微信分享的指令,我們在前端頁面引用它,程式碼如下:.directive('homeShare', function ($ionicGesture, $ionicFtActionSheet,$rootScope,drugService) { return { restrict: 'A', link: function ($scope, $element) { var tapFn = function (evt) { evt.stopPropagation(); $ionicFtActionSheet.show({ buttons: [ { img: "img/g_qq_13.png", text: "QQ" }, { img: "img/g_qq_14.png", text: "朋友圈" }, { img: "img/g_qq_15.png", text: "微信" } ], destructiveText: '取消', destructiveButtonClicked: function () { console.log('取消分享'); return true; }, buttonClicked: function (index) { if (index == 0) { $scope.qqShare(); } else if (index == 1) { $scope.weiboShare(); } else if (index == 2) { $scope.weixinShare(); } return true; } }); }; $ionicGesture.on("tap", tapFn, $element); } } })
注意:這裡使用指令的時候使用"-"把每個單詞分隔開,angular還提供了其他的兩種寫法,這種是最好的,想了解了可以自己google,上面的引用程式碼我自己寫了一個info屬性,後面填入的是html頁面拿到的資料物件,在這裡把引數當作屬性,在directive裡面可以獲取到,詳細寫法請往後看。
(三)directive中獲取html頁面傳來的info引數,程式碼如下:
在directive使用scope來儲存引數,方便後面的使用(注意:這裡有個坑,當使用了scope的時候,我們在當前控制器定義的函式全部不能呼叫,需要自己在directive寫
列印結果如下:
上面我們拿到了想要的html頁面的所有資料,接下來怎麼使用資料,就看你們的業務邏輯了。比如想要使用id的值,可以這樣獲取:
就可以拿到引數的id,如下:
完美拿到資料,由於每個功能的需求不一樣,後面的邏輯就不分享了,這是directive獲取html頁面引數的使用,貢獻給大家,避免和我一樣走很多彎路!
相關推薦
directive的傳值問題(全面解析directive的傳值問題)微信分享例項
(一)開發人員可以使用directive自定義angularjs的指令,定義指令的型別有"A"、"E"、"C"、"EAC",這個過程比較簡單,就不加說明了,當你定義好指令之後,問題來了,你怎麼把html頁面的引數傳入到directive自定義的指令中?下面是我做的方法,相信
創業公司做資料分析(五)微信分享追蹤系統
作為系列文章的第五篇,本文重點探討資料採集層中的微信分享追蹤系統。微信分享,早已成為移動網際網路運營的主要方向之一,以Web H5頁面(下面稱之為微信海報)為載體,利用微信龐大的好友關係進行傳播,實現宣傳、拉新等營銷目的。以下圖為例,假設有一個海報被分享到了
微信開發常用技巧(1)-微信分享頁使用者名稱稱帶輸入法頭像解決方案
微信分享頁使用者名稱稱帶輸入法頭像解決方案 微信開發的分享頁,開發者通常都是用程式碼獲取url的引數值來輸入到頁面,這裡會有兩個問題 1.怎麼獲取url的引數值; 2. 使用者頭像需要轉碼; 3. 使用者可能使用輸入法自帶的表情來命名;ps:然而微信居然支援這種操作 解
小程式的小bug(四)--------------------微信分享,上拉載入等方法失效問題
最近被坑了好幾次,上拉載入和微信分享的方法怎麼呼叫也不好用,查了很多文件就是不執行,別的頁面好用而這個頁面不好用,其原因是建立這個頁面的js檔案時,編輯器已經自動寫好了,這些方法 /** * 使用者點選右上角分享 */ onShareAppMessage: funct
JS——子視窗向父視窗傳值(radio選中的列值)
父視窗 <input type="text" class="font3" name="doctor_code" id="doctor_code"> <input type="text" class="font3" name="doctor_desc" id="doctor_d
vue.js入門(22)事件傳值(子向父傳值)
上一節講的是父向子傳值首先我們在Header.vue檔案先加入一個方法來改變title值,首先註冊一個事件methods:{ changetitle:function() { this.$emit("titlechange","子向父傳值");//
微信小程式(5)--頁面跳轉傳值(點選item傳值)
one頁面實現以下程式碼: 1,data-id="{{item.id}}"為標記列表的下標, item.id的來源與wx:for="{{ components }}"的列表渲染 bindtap="re
自己主動升級系統的設計與實現(續2) -- 添加斷點續傳功能 (附最新源代碼)
blog down 決定 top lin dom itl com 關於 一.緣起 之前已經寫了兩篇關於自己主動升級系統OAUS的設計與實現的文章(第一篇、第二篇)。在為OAUS服務端添加自己主動檢測文件變更的功能(這樣每次部署版本號升級時,能夠節省非常多時間。
vue webpack打包上傳方法(不管原理只會用)
我用vue寫了個網頁,想傳到網上去。然後跟男朋友要到一個網址,當然,這個網址是我的名字買的啦,不過它以前是做別的用,現在不需要了,就給我練手用了。 然後,怎麼傳到網上呢,男朋友讓我到這裡下載了一個工具,叫XFTP,作為向伺服器上傳東西的工具。 然後跟男朋友要到這個網址的主
APP測試點總結(全面解析)
1.功能性測試: ——根據產品需求文件編寫測試用例。 ——軟體設計文件編寫用例。 注意:就是根據產品需求文件編寫測試用例而進行測試。 2.相容性測試: ——android版本的相容性 ——手機解析度相容性 ——網路的相容性:2G\3G\4G\WIFI,弱網下、斷
python傳送post請求上傳檔案,無法解析上傳的檔案
前言 近日,在做介面測試時遇到一個奇葩的問題。 使用post請求直接通過介面上傳檔案,無法識別檔案。 遇到的問題 以下是抓包得到的資訊: 以上請求是通過Postman直接傳送請求的。 在這裡可以看到訊息頭裡包含:Access-Token和Content-Type 因此在在使用python直接
HTML5 CSS3 經典案例:無外掛拖拽上傳圖片 (支援預覽與批量) (一)
上傳基本是專案中經常出現的,一般採用:1、form提交 2、flash3、html5form提交會重新整理頁面,很難做到非同步上傳;flash可能是用得比較多了,因為可以兼顧到幾乎所有的瀏覽器,我之前一直會用jquery的uploadify作為專案中的上傳工具,uploadi
iOS應用程式上傳AppStore(新版本上傳)
本篇部落格記錄的是將iOS應用上傳AppStore,具體是把新的版本上傳,與新專案上傳差不多,只不過更新版本的上傳要稍微簡單些,這裡不會介紹證書的配置哦。 1.進入蘋果開發者中心-->進入iTunes Connect-->點選進入我的app-->點選你之前
(乾貨)微信小程式之上傳圖片和圖片預覽
這幾天一直負責做微信小程式這一塊,也可以說是邊做邊學習吧,把自己做的微信小程式的一些功能分享出來,與大家探討一下,相互學習相互進步。先看下效果圖只寫了一下效果樣式的話希望大家不要太在意,下面馬路殺手要開車了。1.wxml排版和佈局 這個排版非常簡單就是一個按鈕button加
python獲得變數的名稱,獲得傳參(形參和實參)的名稱
1.需求和例子 需求:獲得變數的名稱 實現例子: aaa = '23asa' bbb = 'kjljl2' loc = locals() def get_variable_name(variable): print loc for key
okhttp常規用法和上傳檔案(multipart/form-data的學習)
在app 中,最基本的設定使用者頭像,需要進行頭像的圖片上傳,那就會使用到 post 進行上傳檔案的操作。必然要了解下 Multipart/form-data 的含義。以前在寫這部分程式碼的時候,不理解Headers.of(xxx)什麼意思,而且 裡面填寫的格式又有什麼要求代表了什麼意思 等。 看到
HTML5 CSS3 經典案例:無外掛拖拽上傳圖片 (支援預覽與批量) (二)
效果圖1:效果圖2:好了,請允許我把圖片貼了兩遍,方便大家看效果了~可以看出我們的圖片的li的html其實還是挺複雜的,於是我把html文件做了一些修改:<span style="font-size:12px;"><body> <div id="uploadBox"> &
如何通過html上傳照片(自定義上傳圖示)
在移動web的開發過程中。我們常常會遇到這樣問題。就是上傳照片。那麼我們所知道的上傳控制元件其實有很多。 以.NET為例則有FileUpload控制元件。這個控制元件上傳比較容易。但是樣式比較醜陋。 接下來我們講講如何利用html上傳照片。 廢話不多說。我們來看一段html
js獲取檔案上傳路徑(解決出現fakepath的問題)
上傳檔案時,有時候需要獲取檔案路徑,但是瀏覽器安全機制,使得路徑被fakepath代替,獲取不到 下面的程式碼解決這個問題,支援Chrome,其它瀏覽器沒測試,用的時候注意 程式碼 <!DOCT
教你怎麼用ajax傳陣列(也可以是轉為json)
我之前寫過一個關於ajax的詳解,那個是標準的ajax,今天介紹的是怎麼用ajax傳遞陣列這樣的資料型別呢?很多的時候我們需要給後端的資料不是幾個單獨的資料,一般見到的程式碼的是這樣的: data: { id : id, name : name, sex : sex }