转换指令内的指令？

Question

嘿Stackoverflow偷看。

这有效：

angular.module('demoApp', [])
  .controller('MainController', function($scope) {
    $scope.Data = {
      name: "Bob"
    }

  }).directive("formText", function() {
    return {
      template: '<div><input type="text" ng-model="data" name="{{key}}" id="{{key}}"></div>',
      restrict: 'EA',
      scope: {
      label: "@label",
      key: "@key",
        data: "="
      }
    };
  });

https://jsfiddle.net/ownmph09/4/

那小提琴奏效了。您可以更改控制器范围值。很直接。

但是这个没有：

angular.module('demoApp', [])
  .controller('MainController', function($scope) {
    $scope.Data = {
      name: "Bob"
    }

  }).directive("formText", function() {
    return {
      template: '<div form-input label="{{label}}"><input type="text" ng-model="data" name="{{key}}" id="{{key}}"></div>',
      restrict: 'EA',
      scope: {
      label: "@label",
      key: "@key",
        data: "="
      }
    };
  }).directive('formInput', function() {
    return {
      template: '<div class="form-group"><label class="col-sm-4 control-label">{{label}}</label><div class="col-sm-8" ng-transclude></div></div>',
      restrict: 'EA',
      transclude: true,
      scope: {
        label: "@label"
      }
    };
  });

https://jsfiddle.net/ownmph09/3/

我确定它与transclude和隔离范围有关，但我不太明白发生了什么。希望能比我更了解这些东西的人可以提供帮助。