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

Question

I'm using form component with common validation and saving functions. Inputs are passed to form as transcluded template, like so:

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

The problem is, ng-model is creating dirtyEntity field in parent vm, instead of modifying the components one. Defining components controller as "formVm" didn't help.

Is there way to force transcluded element ng-model to change only component's scope?

Or is it considered incorrect to interact between transcluded template and component controller, and shouldn't be never done?

Answer 1

Building on the plunkr of dfsq, here is a solution to your problem:

In your component, you programmatically copy the elements meant for transclusion and add them to your form controller.

You can programmatically transclude using the $transclude service and append the elements to the form like this:

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

Then you add the elements to your form controller like this:

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

In this case you need to wrap it in a timeout otherwise angular will instantiate your controller and your code will run, however, the form controller is not instantiated yet.

Here is the complete snippet and you can find a 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);
    })
  })
}

However, keep in mind that you might need to check for elements that are not inputs. I am unsure how robust the form controller reacts to an image added as a control.