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

В моем приложении AngularJS у меня везде разные сложные входные данные. Например, некоторые входные данные имеют директиву использовать автозаполнение с Google Places или с автозаполнением из 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-коды действительно разные.


javascript angularjs directive
person harkor    schedule 30.01.2014    source источник
comment
Почему бы не использовать шаблон?   -  person Davin Tryon    schedule 30.01.2014
comment
Например, у меня есть такой стиль ввода ‹input type=text placeholder={{lang('placeholderWhere')}} name=where id=where-input ng-model=data.form.where.txt google-places my- позиция стирания-кнопка /›, и у меня есть этот стиль ввода ‹тип ввода=текстовый идентификатор=какой-входной заполнитель={{lang('placeholderWho')}} name=who ng-model=data.form.who.txt typeahead =item для элемента в autoComplete.list['who'] | filter:$viewValue autocomplete-api erase-btn /› Как я могу сохранить другие директивы в порядке с шаблоном?   -  person harkor    schedule 30.01.2014
comment
Извините за дрянной стиль =› pastebin.com/9LeSatGH   -  person harkor    schedule 30.01.2014
comment
хороший вопрос. у вас есть решение для этого?   -  person Sakeer    schedule 25.07.2014
comment
Нет, извините, я искал много времени, и я нашел что-нибудь.   -  person harkor    schedule 25.07.2014

Ответы (1)


arrow_upward
42
arrow_downward

Вы можете создавать собственные входные данные внутри функции ссылки вашей директивы в зависимости от значений модели. Если вы хотите, чтобы элементы были привязаны к модели или использовали директивы для их построения, вы должны использовать $compile (и не забудьте вызвать скомпилированный шаблон с моделью):

HTML

<!DOCTYPE html>
<html ng-app="demo">

  <head>
    <script data-require="angular.js@*" 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>

JavaScript

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

Планкер: http://plnkr.co/edit/pzFjgtf9Q4kTI7XGAUCF?p=preview

person Vadim    schedule 30.01.2014
comment
Я не понимаю... Ваш пример дает мне метод с атрибутом другого типа... Моя проблема в том, что я вызываю разные другие директивы... Я просто хочу добавить кнопку после ввода и могу заставить контроллер щелкнуть внутри этого директива... - person harkor; 30.01.2014
comment
Я обновил пример, но общая идея та же: написать директиву, которая отображает пользовательский ввод + кнопку закрытия (по требованию). Входные данные (флажок, текст) могут быть любыми пользовательскими входными данными с другими директивами, а не только стандартными входными данными html. - person Vadim; 30.01.2014
comment
Как насчет выбора опций? как добавить это в теги элемента select. - person irth; 26.06.2014
comment
По моему опыту, element.append() не работает внутри директивы. Версия append() AngularJS удаляет весь HTML. Это работает только в том случае, если вы также включаете jQuery на свою страницу, и в этом случае AngularJS использует функцию append() jQuery. - person Jakob Jenkov; 22.08.2014
comment
Могу ли я связать входную переменную с функцией связи, не зная ее имени? Директиву нельзя повторно использовать, если мне нужно назвать переменные в html так же, как в директиве. - person Gerfried; 20.09.2016
comment
@Gerfried Конечно, в plnkr.co/edit/1WEY8laNKbwpM6swBYcw?p=preview вы можно увидеть пример, в котором input — это значение, взятое из изолированной области действия директивы, которая привязана к атрибуту demo-directive элемента - person Vadim; 20.09.2016