鏈接vs編譯與控制器創(chuàng)建指令時(shí)，可以將代碼放入編譯器，鏈接函數(shù)或控制器中。在文檔中，他們解釋說(shuō)：編譯和鏈接功能用于角度循環(huán)的不同階段控制器在指令之間共享但是，對(duì)我而言，目前尚不清楚哪種代碼應(yīng)該去哪里。例如：我可以在編譯中創(chuàng)建函數(shù)并將它們附加到鏈接中的作用域，還是僅將函數(shù)附加到控制器中的作用域？如果每個(gè)指令都有自己的控制器，控制器如何在指令之間共享？控制器是真的共享還是只是范圍屬性？
3 回答
弒天下
TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超8個(gè)贊
編譯：
這是Angular實(shí)際編譯指令的階段。對(duì)于給定指令的每個(gè)引用，只調(diào)用一次此編譯函數(shù)。例如，假設(shè)您正在使用ng-repeat指令。ng-repeat必須查找它所附加的元素，提取它所附加的html片段并創(chuàng)建模板函數(shù)。
如果您使用過(guò)HandleBars，下劃線模板或等效模板，就像編譯模板以提取模板函數(shù)一樣。對(duì)于此模板函數(shù)，您傳遞數(shù)據(jù)，該函數(shù)的返回值是html，數(shù)據(jù)位于正確的位置。
編譯階段是Angular中返回模板函數(shù)的步驟。角度中的此模板函數(shù)稱為鏈接函數(shù)。
鏈接階段：
鏈接階段是將數(shù)據(jù)（$ scope）附加到鏈接函數(shù)的位置，它應(yīng)該返回鏈接的html。由于該指令還指定了這個(gè)html的去向或更改的內(nèi)容，因此它已經(jīng)很好了。這是您要對(duì)鏈接的html進(jìn)行更改的功能，即已經(jīng)附加了數(shù)據(jù)的html。在角度中如果你在鏈接函數(shù)中編寫(xiě)代碼，它通常是post-link函數(shù)（默認(rèn)情況下）。它是一種在鏈接函數(shù)將數(shù)據(jù)與模板鏈接后調(diào)用的回調(diào)。
控制器：
控制器是您放置某些指令特定邏輯的地方。這個(gè)邏輯也可以進(jìn)入鏈接函數(shù)，但是你必須將該邏輯放在范圍上以使其“可共享”。問(wèn)題在于，您將使用指令來(lái)破壞范圍，而這些東西實(shí)際上并不是預(yù)期的。那么，如果兩個(gè)指令希望彼此交談/相互合作，那么又有什么選擇呢？當(dāng)然，您可以將所有邏輯放入服務(wù)中，然后使這兩個(gè)指令依賴于該服務(wù)，但這只會(huì)帶來(lái)一個(gè)依賴性。另一種方法是為這個(gè)范圍提供一個(gè)控制器（通常是隔離范圍？），然后當(dāng)該指令“需要”另一個(gè)指令時(shí)，該控制器被注入另一個(gè)指令。
嚕嚕噠
TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超7個(gè)贊
我還想補(bǔ)充一下Google團(tuán)隊(duì)的O'Reily AngularJS書(shū)所說(shuō)的內(nèi)容：
控制器 - 創(chuàng)建一個(gè)控制器，該控制器發(fā)布用于跨指令進(jìn)行通信的API。一個(gè)很好的例子是指令傳播指令
鏈接 - 以編程方式修改生成的DOM元素實(shí)例，添加事件偵聽(tīng)器以及設(shè)置數(shù)據(jù)綁定。
編譯 - 以編程方式修改指令副本中的功能的DOM模板，如在ng-repeat中使用時(shí)。您的編譯函數(shù)也可以返回鏈接函數(shù)來(lái)修改結(jié)果元素實(shí)例。
揚(yáng)帆大魚(yú)
TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超9個(gè)贊
A directive允許您以聲明方式擴(kuò)展HTML詞匯表以構(gòu)建Web組件。該ng-app屬性是一個(gè)指令，所以是ng-controller所有的ng- prefixed attributes。指令可以是attributes，tags甚至class names是comments。
指令如何誕生（compilation和instantiation）
編譯：我們將在呈現(xiàn)之前將該compile函數(shù)用于manipulateDOM并返回一個(gè)link函數(shù)（將為我們處理鏈接）。這也是放置任何需要與所有instancesthis指令共享的方法的地方。
link：我們將使用該link函數(shù)注冊(cè)特定DOM元素上的所有偵聽(tīng)器（從模板克?。┎⒃O(shè)置我們對(duì)頁(yè)面的綁定。
如果設(shè)置在compile()函數(shù)中，它們只會(huì)被設(shè)置一次（這通常是你想要的）。如果在link()函數(shù)中設(shè)置，則每次將HTML元素綁定到對(duì)象中的數(shù)據(jù)時(shí)都會(huì)設(shè)置它們。
<div ng-repeat="i in [0,1,2]">
<simple>
<div>Inner content</div>
</simple></div>app.directive("simple", function(){
return {
restrict: "EA",
transclude:true,
template:"<div>{{label}}<div ng-transclude></div></div>",
compile: function(element, attributes){
return {
pre: function(scope, element, attributes, controller, transcludeFn){
},
post: function(scope, element, attributes, controller, transcludeFn){
}
}
},
controller: function($scope){
}
};
});Compile函數(shù)返回pre和post鏈接函數(shù)。在預(yù)鏈接函數(shù)中，我們有實(shí)例模板以及范圍controller，但是模板沒(méi)有綁定到范圍，仍然沒(méi)有被轉(zhuǎn)換的內(nèi)容。
Postlink function是post link是最后一個(gè)執(zhí)行的函數(shù)?，F(xiàn)在transclusion已經(jīng)完成了the template is linked to a scope，和view will update with data bound values after the next digest cycle。該link選項(xiàng)只是設(shè)置post-link功能的快捷方式。
controller：指令控制器可以傳遞給另一個(gè)指令鏈接/編譯階段。它可以作為在指令間通信中使用的手段注入其他指南。
您必須指定所需指令的名稱 - 它應(yīng)綁定到同一元素或其父元素。該名稱可以帶有以下前綴：
? – Will not raise any error if a mentioned directive does not exist.^ – Will look for the directive on parent elements, if not available on the same element.
使用方括號(hào)[‘directive1′, ‘directive2′, ‘directive3′]需要多個(gè)指令控制器。
var app = angular.module('app', []);app.controller('MainCtrl', function($scope, $element) {});app.directive('parentDirective', function() {
return {
restrict: 'E',
template: '<child-directive></child-directive>',
controller: function($scope, $element){
this.variable = "Hi Vinothbabu"
}
}});app.directive('childDirective', function() {
return {
restrict: 'E',
template: '<h1>I am child</h1>',
replace: true,
require: '^parentDirective',
link: function($scope, $element, attr, parentDirectCtrl){
//you now have access to parentDirectCtrl.variable
}
}});- 3 回答
- 0 關(guān)注
- 568 瀏覽
添加回答
舉報(bào)
0/150
提交
取消