2016-06-07 69 views
0

我是新來的角,我仍然試圖學習很多,有一件事我遇到過,需要知道我是否可以使用鏈接,控制器,編譯所有在一起在一個單一的指令?在指令中使用鏈接,編譯和控制器功能

例如,這是一個例子,我在一些指令中工作,同時看着輸出,我發現這個鏈接功能不起作用。任何理由不工作,或者我犯了一個明顯的錯誤。

CODE

angular.module('app').directive('movies', function() { 
    return { 
    templateUrl: "movieCard.html", 
    restrict: "EA", 
    scope: { }, 
    link: function(scope, element, attrs) { 
     console.log("link function called"); 
    }, 
    controller: function($scope) { 
     console.log("controller function called"); 
    }, 
    compile: function(elem,attrss){ 
     console.log("compile function called"); 
    } 
    } 

}) 

我創建了Plunker

回答

1

Link功能是編譯功能的一部分。如果你定義了編譯,你可以重寫編譯函數,前鏈接函數和後鏈接函數。 你可以寫你的編譯功能是這樣的:

compile: function(elem,attrss){ 
    console.log("compile function called"); 
    return { 
     pre: function() { console.log("pre link function called"); }, 
     post: function() { console.log("post link function called, it's the same of link function"); } 
    } 
} 

所以沒用到指令定義鏈接如果重寫編譯功能。並且鏈接不會被調用。 我創建了一個小蹦蹦跳跳者來說明它https://plnkr.co/edit/hbel2uGzbyp0VHfQS4pN?p=preview。以該順序

角呼叫功能:

  • 創建指令的範圍從頂部(取決於配置)
  • 解析DOM來底部(DOM的foreach節點)
    • 呼叫編譯功能
    • 呼叫控制器功能
    • 呼叫預先鏈接功能
  • 解析DOM從底部到頂部
    • 調用後鏈接功能

我建議你閱讀這篇文章Angular directives - when and how to use compile, controller, pre-link and post-link

+0

確定了問題的實質,但仍需要知道你爲什麼不,我們在編譯函數作爲參數傳遞範圍,如果前後都是編譯功能的部分怎麼來的,我們能直接將範圍傳遞給前後。我現在很困惑。 –

+0

我只寫了我的前後鏈接函數,但角度傳遞給post和pre函數的多個參數,如範圍。我用參數編輯plunker – Silvinus

0

一旦DOM準備就緒後,角JS流程dom並遍歷元素並調用相關聯的編譯函數(實現模板級別更改)和ele的實例創建發言:然後鏈接功能(默認值後鏈接)被稱爲

  1. 預鏈接 - 落實執行邏輯時AngularJS已經編制的子元素。
  2. 文章鏈接 - 它被調用的順序相反,以確保所有孩子的 迭代在父代之前。

因此,在ng-repeat的情況下,如果我們想要對所有元素進行更改,那麼我們應該在編譯函數中添加該代碼,否則如果實例級別高於鏈接函數即可以有多個元素實例,但只有一個模板元素。

參考http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives/

相關問題