La directive angulaire n'évalue pas l'intérieur ng-repeat

J'ai la configuration suivante:

App/Directive

var app = angular.module("MyApp", []);

app.directive("adminRosterItem", function () {
    return {
        restrict: "E",
        scope: {
            displayText: "@"
        },
        template: "<td>{{ displayText }}</td>", //should I have this?
        link: function(scope, element, attrs){
            //What do I put here? I don't seem to have any
            //element to initialize (set up event handlers, for example)
        },
        compile: function(?,?,?){} //should I have this? If so, what goes inside?
    }
});

Contrôleur

function PositionsController($scope) {
           $scope.positions = [{ Name: "Quarterback", Code: "QB" },
                               { Name: "Wide Receiver", Code: "WR" }
                              ]; 
}

HTML:

<div ng-app="MyApp">
    <div ng-controller="PositionsController">            
        <table>
            <tr ng-repeat="position in positions">
                <admin-roster-item displayText="{{ position.Name + ' (' + position.Code + ')' }}"></admin-roster-item>
             </tr>
         </table>       
    </div>
</div>

C'est un exemple très simple, mais je n'arrive pas à rendre. Peut-être il y a quelque chose que les tutoriels ne sont pas à me dire, ou c'est secret Angulaire de la connaissance?

Si je retire la directive à l'intérieur de la <tr ng-repeat="..." /> et place <td>{{ displayText }}</td> au lieu de cela, il affichera tous les enregistrements.

Mais je veux la directive être plus compliqué que juste une seule <td>{{}}</td> (éventuellement) pour que je puisse réutiliser cette directive dans de multiples applications.

Donc, je suis vraiment se demander comment créer correctement une directive qui va à l'intérieur de ng-repeat? Ce qui me manque? Ce qui devrait être retiré à partir du code ci-dessus?

source d'informationauteur Mickael Caruso

8

Acceptez que vous devez penser à où la directive commence et se termine. Voici un plnkr qui illustre une directive liés à chaque élément d'un tableau - http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=preview

Si vous voulez la directive pour encapsuler l'énumération d'une collection définie par un parent, il devient un peu plus difficile. Je ne sais pas si ce qui suit est la "meilleure pratique", mais c'est la façon dont j'ai géré ça -- http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=preview

Quand on s'appuie sur la directive pour effectuer l'itération vous vous impliquez avec transclusion, qui est un mot qui signifie (que je comprends) prendre le contenu défini dans le parent, le pousser dans la directive, puis de l'évaluer. J'ai travaillé avec angulaire pour quelques mois, et je commence à penser que le fait de poser la directive pour effectuer une itération est une odeur, et j'ai toujours été en mesure de concevoir autour d'elle.
9

En ignorant tous les aspects théoriques, vous pouvez obtenir votre code de travail par deux changements simples.
1. ne pas utiliser des majuscules et des minuscules dans vos noms d'attribut. displaytext pas displayText
2. mettre le <td> balises en dehors de la directive, dans le modèle
Le faire et il fonctionne; il pense que ceux qui sont à la fois Angulaire de bugs.

je pense que la bonne façon de procéder serait d'envoyer l'objet dans l'admin de la liste élément, comme ceci:

<tr ng-repeat="position in positions">
  <admin-roster-item pos="position">         
  </admin-roster-item>
</tr>

et dans la directive:

var app = angular.module("MyApp", []);

app.directive("adminRosterItem", function () {
  return {
    restrict: "E",
    scope: {
        pos: "@"
    },
    template: "<td>{{ formattedText }}</td>", //should I have this?
    link: function(scope, element, attrs){
        //all of this can easily be done with a filter, but i understand you just want to     
        //know how it works
        scope.formattedText = scope.pos.Name + ' (' + scope.pos.Code + ')';
    }
  }
});

PS. je n'ai pas tester cette!

1

Au lieu d'écrire votre directive en tant qu'enfant de ng-repeat, essayez de garder la coutume de la directive sur le même niveau que ng-repeat, ce
```
<tr ng-repeat="position in positions" admin-roster-item displayText="{{ position.Name + ' (' + position.Code + ')' }}"></tr>
```
Et, en outre, permettre à votre custom directive être utilisé comme attribut. AngulaJS a défini ng-répète la priorité à 1000, à la fois lorsque vous personnalisé directive est fait, il ne vont pas bien avec ng-repeat.

Une deuxième option (essayez seulement si la première échoue) est de définir la priorité de votre personnalisé directive, plus que ngRepeat c'est à dire à 1001.

J'ai eu le même problème, où la ng-repeat, à mon avis, wass a pas évalué si les points de vue contenus directive ("mydirective')

Mon directive définition a été

angular.module('myApp')
  .directive('myDirective', function () {
    return {
      templateUrl: 'components/directives/mydirective.html',
      restrict: 'EA',
      controller: 'MyDirectiveController',
      controllerAs: 'vm',
      link: function (scope, element, attrs) {
      }
    };
  });

et de mon point de vue, contrôleur de définition a été

  angular.module('myApp')
    .component('myView', {
      templateUrl: 'app/views/myview.html',
      controller: myViewComponent,
      controllerAs: "vm"
    });

vous pouvez remarquer les deux contrôleurs sont visées par 'vm' aide de 'controllerAs paramètre. C'est la raison pour laquelle le problème. Lorsque la directive est présent dans la vue, angulaire se réfère toujours le " vm " défini dans la directive contrôleur plutôt que de la vue.

Quand je donne des noms différents pour contrôleur de références, le problème a disparu

Maintenant, Mon directive définition est

angular.module('myApp')
  .directive('myDirective', function () {
    return {
      templateUrl: 'components/directives/mydirective.html',
      restrict: 'EA',
      controller: 'MyDirectiveController',
      controllerAs: 'directiveVM',
      link: function (scope, element, attrs) {
      }
    };
  });

et de mon point de vue, contrôleur de définition a été

  angular.module('myApp')
    .component('myView', {
      templateUrl: 'app/views/myview.html',
      controller: myViewComponent,
      controllerAs: "viewCtrlVM"
    });

Espère que cela aide.

0

Eu exactement le même problème.
Avait une coutume de la directive dans un ng-repeat, table->tr>td>directive, et lors du tri de la table à l'aide de ng-repeat et Tableau.trier le tableau fait pour changer d'ordre, mais les directives n'ont pas re-rendre. Le problème était que j'utilisais
```
track by $index
```
retiré de la piste par l'indice de la ng-repeat et il a été fixé.

Vous devez vous connecter pour publier un commentaire.