角1.x的消耗指令模板體內外範圍

鑑於第三方指令tpd與分離範圍（爲了便於討論閉源），採取以下的標記，例如：角1.x的消耗指令模板體內外範圍

<div> 
    <tpd> 
     <div>{{tpdScopeField}}</div> 
     <div>{{outerScopeField}}</div> 
    </tpd> 
    <div>{{outerScopeField}}</div> 
</div>

這將輸出類似的東西於：

<div> 
    <tpd> 
     <div>tpdScopeFieldValue</div> 
     <div></div> 
    </tpd> 
    <div>outerScopeFieldValue</div> 
</div>

如何纔能有效地與標記外/父範圍進行溝通？

另一個例子是試圖調用一個函數（對某事的事件）外範圍：

<div> 
    <tpd> 
     <button ng-click="outerScopeEventHandler(someArgs)">Click me!</button> 
    </tpd> 
    <div>{{outerScopeField}}</div> 
</div>

來源

2016-06-21 Paul Fleming

如果屬性在父母提供，該代碼會做：

<div> 
    <tpd> 
     <div>{{tpdScopeField}}</div> 
     <div>{{$parent.outerScopeField}}</div> 
    </tpd> 
    <div>{{outerScopeField}}</div> 
</div>

而類似的$parent.functionToCall(args)將調用父範圍方法。

來源

2016-06-21 13:11:54 SamGhatak

看，這就是我的想法。但它在現場工作，但不是功能。你有沒有工作的例子？ –

在嘗試了更多之後，我發現了我的問題（它適用於預期的字段和函數）。如果在任何父元素上使用ng-if，就會創建一個新的作用域，需要額外的'$ parent.'前綴（eugh）。 –

也許你可以用$ parent做到這一點。但我認爲你不應該這樣做與父母。如果此指令tpd是第三方指令，則應使用decorator。

您可以使用修飾器修改它。例如，您可以爲此指令添加另一個屬性。你可以傳遞你父母的$ scope的自定義數據。

我說過這些。因爲使用$ parent是一種反模式和糟糕體系結構的跡象。

您對此評論的補充;如果由於ngIf而導致新的隔離範圍，則可以爲您的$ parent範圍使用controllerAs。

裝飾者的例子;

angular.module('yourApp') 
    .config([ '$provide', function($provide) { 
    $provide.decorator('tpd', ['$delegate', function($delegate) { 
     var directive = $delegate[0]; 

     angular.extend(directive.scope, { 
      othervar: "=" 
     }); 

     return $delegate; 
    }]); 
    }]);

來源

2016-06-21 13:24:54

你能提供一個裝飾器的例子嗎？ –

我已經更新了我的答案。 –

角1.x的消耗指令模板體內外範圍

回答

相關問題