Добавить html в элемент в директиве и сделать локальную функцию для взаимодействия с ней

В моем приложении AngularJS у меня разные сложные входы. Например, некоторые входы имеют директиву использовать автозаполнение с помощью Google Адресов или с автозавершением из Twitter Bootstrap.

Я ищу способ сделать директиву, которая отображает кнопку стирания, когда мы добавляем некоторый текст, такой как функция iOS.

Я сделал это, но scope.erase не запускается, а ng-show.

Можно ли добавить HTML после ввода текста и "играть" с ними внутри контроллера?

Мой тест:

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

Я не хочу использовать шаблон, потому что все мои исходные HTML файлы действительно отличаются.

<!DOCTYPE html> <html ng-app="demo"> <head> <script data-require="[email protected]*" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body ng-controller="demoController"> <div demo-directive ng-repeat="input in inputs"></div> </body> </html>

angular.module('demo', []). controller('demoController', function($scope) { $scope.inputs = [{ inputType: 'checkbox', checked: true, label: 'input 1' }, { inputType: 'text', value: 'some text 1', label: 'input 2' }]; $scope.doSomething = function() { alert('button clicked'); }; }). directive('demoDirective', function($compile) { return { template: '<div><label>{{input.label}}: </label></div>', replace: true, link: function(scope, element) { var el = angular.element('<span/>'); switch(scope.input.inputType) { case 'checkbox': el.append('<input type="checkbox" ng-model="input.checked"/><button ng-if="input.checked" ng-click="input.checked=false; doSomething()">X</button>'); break; case 'text': el.append('<input type="text" ng-model="input.value"/><button ng-if="input.value" ng-click="input.value=\'\'; doSomething()">X</button>'); break; } $compile(el)(scope); element.append(el); } } });

Ответ 1