En mi aplicación AngularJS, tengo diferentes entradas complejas en todas partes. Por ejemplo, algunas entradas tienen una directiva para usar autocompletar con Google Places o con autocompletar desde Twitter Bootstrap.

Estoy buscando una manera de hacer una directiva que muestre un botón de borrado cuando agregamos un texto como la característica de iOS.

Hice éste, pero elscope.erase no comienza, ni tampoco lang-show.

¿Es posible agregar HTML después de la entrada de texto y "jugar" con ellos dentro del controlador?

Mi prueba:

app.directive('eraseBtn', function($parse, $compile){

return {
    require: 'ngModel',
    restrict: "A",
    transclude: true,
    link : function(scope, element, attrs, model){

        element.parent().append('<button ng-click="erase()" ng-show="model.length > 0" class="erase-btn">x</button>');

        scope.erase = function(){
            console.log('Erase test');
        }
    }
}
});

No quiero usar una plantilla porque todos los HTML de mis entradas son realmente diferentes.