web-dev-qa-db-fra.com

AngularJS supprime les attributs

J'ai une directive qui remplace ma balise personnalisée par du HTML standard. Il y a certains attributs que j'aimerais supprimer. Par exemple, étant donné la syntaxe

<ui mybutton width="30"></mybutton>

ma directive le transforme en

<div width="30" class="btn">bla bla </div>

Je veux supprimer ça "width=30" et ajouter style="width:{{old width value here}}"

J'ai expérimenté la fonction de compilation et de liaison. Dois-je le faire dans la fonction de compilation ou de liaison?

J'ai pensé que je devais le faire dans la fonction de compilation parce que je veux faire une modification dans le modèle.

A voir en direct http://jsfiddle.net/WptGC/2/ ATTENTION: votre navigateur peut se bloquer! Voir vivre et en toute sécurité http://jsfiddle.net/WptGC/3/ le code qui fait tout planter est commenté.

.directive('mybutton', function($compile) {
return {
    restrict: 'A',
    //transclude: true,
    template: '<div class="this is my subscreen div" style="width:{{width}}"></div>',
    replace: false,
    /*scope: {
        width: '@',
        height: '@',
        x: '@',
        y: '@'
    },*/

    compile: function($tElement, $tAttrs) {
        console.log("subscreen template attrs:");
        console.log($tAttrs);
        var el = $tElement[0];
         //el.getAttribute('width');
        var stylewidth = el.getAttribute('width'); 
        el.removeAttribute('width');

         return function(scope) {
            $compile(el)(scope);
         }
    }
}
})

Je reçois juste une boucle étrange (ce console.log apparaît quelques milliers de fois)

angularjsangularjs-directive
17
Eduard Gamonal

À moins que je manque une autre exigence, vous devriez simplement pouvoir utiliser une portée isolée et un modèle comme:

http://jsfiddle.net/WptGC/6/

app.directive('backbutton',function(){
  return {
    restrict: 'A',
    replace:true,
    scope: {
        x: '@',
        y: '@'
    },
    template:'<button style="width: {{x}}px; height: {{y}}px">A back-button template</button>',
    link: function (scope, element, attrs) {
      element.removeAttr('x').removeAttr('y');
    }
  }
});
27
Langdon