Question

我有一个表格的指令。通常它只是我需要的，但有时我需要添加更多的输入字段。所以我尝试使用transclusion，但它不起作用。

我创建了一个说明者：http://plnkr.co/edit/zNOK3SJFXE1PxsvUvPBQ?p=preview

指令是一个简单的表单，带有输入字段，转换和一个帮助测试它的按钮（不包括重要部分）：

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）范围，则必须手动执行＃34;＃34; （没有ng-transclude），使用link函数的transcludeFn参数。此功能允许您更改转换的范围。

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

来自here：

当存在transcluded和isolate范围时，隔离范围 property $$ nextSibling将引用转换范围。

普兰克：http://plnkr.co/edit/z2Bmfx?p=preview

AngularJS - 来自transclude范围的访问指令范围

2 个答案: