How to use transclude without a template in Angular directive?

Question

<button command="saveCmd">{{saveText}}</button> 

The command directive has no pattern - it is a behavioral directive. But I need to use transclude: true to display {{saveText}} .

I could create a dummy template, for example template: "<div ng-transclude></div>" , but I'm not sure if the div button inside is valid for all html browsers.

I could also use an attribute to define the name, for example <button title="saveText"... But my question is about ng-transclude without a template. Is it possible?

Thanks in advance.

Update:

The new internal isolate directive scope scope: {} is the reason why {{saveText}} is not saved by default.

Answer 1

You can create a directive without a controller and without an isolated area. In the link function, I sometimes do this:

 .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)); }); }); } }; }); 

Perhaps this $ parse trick helps with setting up your team ...