角度 1.5。如何使嵌入的模板绑定到组件范围

Posted 2023-02-23

【中文标题】角度 1.5。如何使嵌入的模板绑定到组件范围

【英文标题】：Angular 1.5. How to make transcluded template to bind to component scope

【发布时间】：2017-01-20 19:39:26

【问题描述】：

我正在使用具有常见验证和保存功能的表单组件。 输入作为嵌入模板传递给表单，如下所示：

<form-editor entity="vm.entity">
        <input ng-model="vm.dirtyEntity.name" required name="nameInput">
</form-editor>

问题是，ng-model 在父虚拟机中创建了dirtyEntity 字段，而不是修改组件之一。 将组件控制器定义为“formVm”并没有帮助。

有没有办法强制嵌入的元素 ng-model 只改变组件的范围？

或者在transcluded模板和组件控制器之间进行交互是否被认为是不正确的，不应该永远这样做？

【问题讨论】：

尝试在适当的范围内手动嵌入内容。

你的意思是用 $compile 进行 DOM 操作吗？

不，我的意思是$transclude 函数。我开始检查这个想法，但是这种方式验证停止工作，这不好。 plnkr.co/edit/j5xtGBJh2iPCK0H7aB51?p=preview

【参考方案1】：

基于 dfsq 的 plunkr，这里有一个解决您问题的方法：

在您的组件中，您以编程方式复制用于嵌入的元素并将它们添加到您的表单控制器中。

您可以使用 $transclude 服务以编程方式进行转换，并将元素附加到表单中，如下所示：

$transclude($scope, function(clone) 
  $element.find('form').append(clone);
)

然后像这样将元素添加到表单控制器中：

$scope.testForm.$addControl($element);

在这种情况下，您需要将其包装在超时中，否则 Angular 将实例化您的控制器并且您的代码将运行，但是，表单控制器尚未实例化。

这里是完整的 sn-p，你可以找到 plunkr here

controller($scope, $element, $transclude, $timeout) 
  // use a timeout to break javascript flow to allow a DOM update
  $timeout(function() 
    $transclude($scope, function(clone) 
      $element.find('form').append(clone);

      // take the form and add the elements to it
      $scope.testForm.$addControl($element);
    )
  )

但是，请记住，您可能需要检查不是输入的元素。我不确定表单控制器对作为控件添加的图像的反应有多稳健。