Angular 1.5。 如何使transcluded模板綁定到組件范圍

Question

我正在使用具有常見驗證和保存功能的表單組件。 輸入作為transcluded模板傳遞給form，如下所示：

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

問題是，ng-model正在父vm中創建dirtyEntity字段，而不是修改組件之一。 將組件控制器定義為“formVm”沒有幫助。

有沒有辦法強制轉換元素ng-model只改變組件的范圍？

或者在被轉換的模板和組件控制器之間進行交互被認為是不正確的，不應該永遠不會這樣做？

Answer 1

建立在dfsq的plunkr上，這是一個解決您的問題的方法：

在組件中，您以編程方式復制用於轉換的元素，並將它們添加到表單控制器中。

您可以使用$ transclude服務以編程方式轉換，並將元素附加到表單，如下所示：

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

然后將元素添加到表單控制器，如下所示：

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

在這種情況下，您需要將其包裝在超時中，否則angular將實例化您的控制器並且您的代碼將運行，但是，表單控制器尚未實例化。

這是完整的片段，你可以在這里找到一個plunkr

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

但是，請記住，您可能需要檢查不是輸入的元素。 我不確定表單控制器對作為控件添加的圖像的反應有多強大。