Question

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

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

问题是，ng-model正在父vm中创建dirtyEntity字段，而不是修改组件之一。将组件控制器定义为＆＃34; formVm＆＃34;没有帮助。

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

或者在被转换的模板和组件控制器之间进行交互是否被认为是不正确的，并且不应该永远不会完成？

Answer 1

在dfsq的plunkr上构建，这是解决问题的方法：

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

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

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

然后将元素添加到表单控制器中，如下所示：

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);
    })
  })
}

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

以下是完整代码段，您可以找到一个plunkr here

Image picture = ImageIO.read(new File("C:/Desktop/picture.png"));

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

Angular 1.5。如何使transcluded模板绑定到组件范围

1 个答案: