將對象注入到Angular 1.3中的transcluded內容的範圍內

我想創建一個指令，該指令跨越了指令可以綁定和修改的內容。該指令具有隔離範圍。我想它的工作是這樣的：將對象注入到Angular 1.3中的transcluded內容的範圍內

<my-directive bound-item-name="childObj"> 
    <input ng-model="childObj.someField"> 
</my-directive>

在運行時，我想用childObj的別名，在對象上my-directive的隔離範圍稱爲activeObject。從本質上講，您可能會認爲這與ng-repeat可讓您使用類似obj as alias in objList的陳述類似，並且在transcluded內容alias指的是單個實例。

我似乎無法弄清楚我該如何實際做到這一點......如果我改變了透露的內容以參考$parent.activeItem它確實按我想要的方式工作，但是我覺得那樣會期待讓橫切的內容知道關於指令是如何工作的太多了。似乎在編譯函數中進行修改可能會起作用，除非我無法在文檔中看到，我如何才能真正做到這一點與transcluded內容。雖然我沒有看到有證據表明有辦法做到這一點，但強迫被跨行內容與指令分享其範圍是可以的。

這一定是可能的，但如何？

擺弄這一些，我能夠通過修改scope.$$childHead[scope.boundItemName]而不是在指令中使用scope.activeObject來得到它的工作。儘管如此，如果可能的話，我想不依賴未記錄的內部對象。

來源

2015-07-10 Casey

只是不辦分離範圍的指令 –

@PawełSmołka這不是我的情況選擇。或者如果是這樣，我不得不解決它會導致的一堆其他問題。 – Casey

所以我認爲你需要把你的代碼放在提琴和鏈接它 –

該指令的link函數被賦予transclude函數作爲第5個參數。

link: function(scope, element, attrs, ctrls, transclude){ 
    // ... 
}

這transclude功能需要，你可以創建一個範圍變量和另一個功能 - 所謂的「克隆鏈接功能」 - 即放置在DOM的預鏈接transcluded內容。 transclude函數與您提供的範圍變量鏈接。

這是它的工作原理。

transclude: true, 
scope: {}, // you are free to use whatever scope you need 
link: function(scope, element, attrs, ctrls, transclude){ 

    var boundObj = {}; // your object 
    var alias = attrs.boundItemName; 

    // let's create an isolate scope for the transcluded content 
    var newScope = scope.$new(true); 
    newScope[alias] = boundObj; 

    transclude(newScope, function(preLinkContent){ 

    element.append(preLinkContent); 
    }); 
}

然後，如果你用你的例子：

<my-directive bound-item-name="foo"> 
    <input ng-model="foo.text"> 
</my-directive>

然後，transcluded ng-model會寫入您的內部boundObj的.text財產。

Demo

來源

2015-07-13 18:27:57

後續問題，所以我可以試試這個......如果我把這樣的手動功能，我需要刪除ng-transclude指示？我假設我這樣做，我只需要使用傳遞給transclude函數的函數來查找我想要注入內容的模板中的位置。 – Casey

是的，你需要從模板中刪除'ng-transclude'。 –

@Casey，我的回答是否解決了你的問題？ –

將對象注入到Angular 1.3中的transcluded內容的範圍內

回答

相關問題