1. 程式人生 > >directive的傳值問題(全面解析directive的傳值問題)微信分享例項

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 }