web-dev-qa-db-fra.com

Ajouter du html à un élément de la directive et créer une fonction locale pour interagir avec lui

Dans mon application AngularJS, j'ai partout différentes entrées complexes. Par exemple, certaines entrées ont une directive pour utiliser la saisie semi-automatique avec Google Places ou avec la saisie semi-automatique de Twitter Bootstrap.

Je cherche un moyen de créer une directive qui affiche un bouton d'effacement lorsque nous ajoutons du texte comme la fonctionnalité iOS.

J'ai fait celui-ci, mais le scope.erase ne démarre pas, pas plus que ng-show.

Est-il possible d'ajouter du HTML après la saisie de texte et de "jouer" avec eux à l'intérieur du contrôleur?

Mon test:

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

Je ne veux pas utiliser de modèle car tous les HTML de mes entrées sont vraiment différents.

javascriptangularjsdirective
22
harkor

Vous pouvez créer des entrées personnalisées dans la fonction de lien de votre directive en fonction des valeurs du modèle. Si vous voulez que ces éléments soient liés au modèle ou utilisez des directives pour les construire, vous devez utiliser $compile (et n'oubliez pas d'appeler le modèle compilé avec le modèle):

[~ # ~] 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);
      }
    }
  });

Plunker: http://plnkr.co/edit/pzFjgtf9Q4kTI7XGAUCF?p=preview

42
Vadim