AngularJS - 來自transclude范圍的訪問指令范圍

Question

我有一個表格的指令。 通常它只是我需要的，但有時我需要添加更多的輸入字段。 所以我嘗試使用transclusion，但它不起作用。

我創建了一個清單來說明： http ：//plnkr.co/edit/zNOK3SJFXE1PxsvUvPBQ？p = preview

Directive是一個簡單的表單，帶有輸入字段，transclusion和一個幫助測試它的按鈕（不包括重要部分）：

scope: {
},
transclude: 'element',
template: 
  '<form name="myForm">' +
  '<input type="text" ng-model="data.inDirective"></input>' +
  '<div ng-transclude></div>' +
  '<button ng-click="showData()">show data</button>' +
  '</form>'

在這里，它與翻譯一起使用：

<form-as-directive>
  <input type="text" ng-model="data.inTransclude"></input>
</form-as-directive>

我可以以某種方式在轉換中使用指令的范圍嗎？

Answer 1

如果需要將transcluded html中的控件綁定到指令的（isolate）范圍，則必須使用link函數的transcludeFn參數“手動”（不使用ng-transclude）進行轉換。 此功能允許您更改轉換的范圍。

scope: {
},
transclude: 'element',
replace: true,
template: 
    '<form name="myForm">' +
    '<input type="text" ng-model="data.inDirective"></input>' +
    '<div class="fields"></div>' +
    '<button ng-click="showData()">show data</button>' +
    '</form>',
link: function (scope, elem, attrs, ctrl, transcludeFn) {
    // "scope" here is the directive's isolate scope 
    elem.find('.fields').append(transcludeFn(scope, function () {}));
}

否則，轉換將自動綁定到父（控制器）作用域的（新）子級，以便可以訪問該父作用域的屬性（通過繼承）。

Answer 2

看起來像$$nextSibling是你需要的：

 scope.$$nextSibling.data.inTransclude

從這里 ：

當transcluded和isolate范圍都存在時，隔離范圍屬性$$ nextSibling將引用轉換范圍。

Plunk： http ：//plnkr.co/edit/z2Bmfx？p = preview