AngularJS指令transclude scope = false？

如何防止指令與transclude創建新的範圍？AngularJS指令transclude scope = false？

This jsfiddle我不能綁定任何東西，因爲用紅色邊框說明的新範圍。

HTML：

<div ng-app="components"> 
    <input ng-model="var"> 
    <block> 
     123 
     <input ng-model="var"> 
    </block> 
</div>

的JavaScript：

angular.module('components', []).directive('block',function(){ 
    return{ 
     scope:false, 
     replace:true, 
     restrict:"E", 
     transclude:true, 
     template:'<div class="block" ng-transclude></div>', 
     link:function(scope, el, attrs, ctrl){ 

     } 
    } 
});

CSS：

.ng-scope{ 
    border:1px solid red; 
    margin:10px; 
}

來源

2012-09-27 Jossi

它實際上是預期behav IOR這裏說（NG-transclude創建一個子範圍）：https://github.com/angular/angular.js/issues/1056 和這裏討論：https://groups.google.com/forum/#!msg/angular/45jNmQucSCE/hL8x48-JfZIJ

您可以通過在範圍（obj.var）想在這個小提琴的對象上設置一個成員解決此：http://jsfiddle.net/rdarder/pnSNj/10/

來源

2012-09-27 20:48:19 Guillaume86

感謝。我做了一個更簡單的例子[jsfiddle]（http://jsfiddle.net/RHLzK/5/）。但是這是一個bug還是它的一個特性？ – Jossi

這是子範圍的正常行爲（它們通過父範圍的原型繼承，這意味着您可以從父範圍讀取，但只要您編寫，它就在子範圍內 - 除非您在父範圍workaroud上使用obj ），你可以看看ng-transclude指令的源代碼，複製它，並使用scope：false選項創建自己的代碼。 – Guillaume86

如果我開始使用transclude set作爲'element'，問題再次出現。有誰知道爲什麼它現在不起作用。演示：http://plnkr.co/edit/Bv1kFQtzdVzsasHTUrgf?p=preview –

雖然這是不推薦的角隊，另一個解決辦法是顯式調用transcluded部分中的$父範圍：

<div ng-app="components"> 
    <input ng-model="var"> 
    <block> 
     123 
     <input ng-model="$parent.var"> 
    </block> 
</div>

來源

2015-03-17 13:58:20

AngularJS指令transclude scope = false？

回答

相關問題