2013-08-05 67 views
4
<button command="saveCmd">{{saveText}}</button> 

Command指令沒有任何模板 - 它是行爲指令。但我需要使用transclude: true來顯示{{saveText}}如何在Angular指令中使用沒有模板的transclude?

我可以創建像template: "<div ng-transclude></div>"這樣的虛擬模板,但我不確定div內的按鈕是否適用於所有瀏覽器。

另外我可以使用屬性來定義標題,例如<button title="saveText"...但我的問題是關於ng-transclude沒有模板。可能嗎?

在此先感謝。

更新:

一個新的 '隔離' 範圍內scope: {}指令是爲什麼{{SAVETEXT}}默認情況下不堅持的理由。

+1

默認情況下,如果不使用模板,內容是保持原樣。你在做什麼指令? [不修改內容的指令示例](http://jsfiddle.net/OverZealous/Ns284/1/) – OverZealous

+0

如果將範圍{{}添加到您的JSFIDDLE,{{bar}}將會丟失。 –

回答

1

您可以製作一個沒有控制器的指令,也沒有隔離範圍。在鏈接功能我有時做這樣的事情:

.directive('toggle', function ($parse) { 
    return { 
    /* We can't use an isolated scope in this directive, because it happens 
    * all the time that you need to put a toggle on an element that uses the scope: 
    * <span toggle="boolVar" ng-class="{active: boolVar}">{{someVar}}</span> 
    * 
    * Transclusion can be an option to make the {{someVar}} work, 
    * but the ng-class will use the isolated scope for this directive 
    * (if we'd use the isolated scope, which we don't) 
    */ 
    link: function (scope, $element, attrs) { 
     // use a $parse getter/setter, because toggle can contain a 
     // complicated expression 
     var getter = $parse(attrs.toggle); 
     var setter = getter.assign; 

     $element.on('click', function() { 
     scope.$apply(function() { 
      setter(scope, !getter(scope)); 
     }); 
     }); 
    } 
    }; 
}); 

也許這$解析技巧可以幫助你的命令成立...

相關問題