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

发布时间：2020-12-17 17:19:45 所属栏目：安全来源：网络整理

导读：我有一个表格的指令.通常它只是我需要的,但有时我需要添加更多的输入字段.所以我尝试使用transclusion,但它不起作用. 我创造了一个用来说明这一点的掠夺者：http://plnkr.co/edit/zNOK3SJFXE1PxsvUvPBQ?p=preview Directive是一个简单的表单,带有输入字段,tr

我有一个表格的指令.通常它只是我需要的,但有时我需要添加更多的输入字段.所以我尝试使用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>

我可以以某种方式在转换中使用指令的范围吗？

解决方法

如果需要将transcluded html中的控件绑定到指令的(isolate)范围,则必须使用link函数的transcludeFn参数“手动”(不使用ng-transclude)进行转换.此功能允许您更改转换的范围.

scope: {
},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 () {}));
}

否则,转换将自动绑定到父(控制器)作用域的(新)子级,以便可以访问该父作用域的属性(通过继承).

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!