形式提交$不transcluded元素

Question

上工作，我有這樣的事情：

<my-directive name="form"><div ng-if="form.$submitted"></div></my-directive> 

，並在我的指令：

angular.directive('myDirective', function() { 
    return { 
     template: '<form name="{{ name }}" ng-transclude></form>', 
     transclude: true, 
     scope: { 
      name: '@' 
     }, 
     link: function(scope) { 
      console.log(scope.form.$submitted); //works here 
     } 
    } 
}); 

form.$submitted似乎並不在此定義？但它是在指令範圍內定義的？我如何從HTML訪問form.$submitted？

謝謝！

Answer 1

transcluded（與ng-transclude）內容的範圍與指令的隔離範圍不同。

您可能 transclude的分離範圍手動，並適用於transcluded內容：

template: '<form name="{{ name }}"></form>', 
transclude: true, 
scope: { 
    name: "@" 
}, 
link: function(scope, element, attrs, ctrls, transcludeFn){ 
    transcludeFn(scope, function(contentClone){ 
    element.find("form").append(contentClone); 
    }); 
} 

但它是一個有點尷尬的指令的用戶，因爲現在他們已經HTML是指一些「神奇的」變量（是的，當然你的指令定義）未明顯有人觀察HTML：

<my-directive name="form"> 
    <pre>{{form}}</pre> 
</my-directive> 

這裏，並不清楚{{form}}指。