Modification dynamique du contenu avec la directive AngularJS, l'usine et ng-repeat

super doux

Je travaille sur un widget qui changera dynamiquement son contenu chaque fois que je clique sur un bouton correspondant. J'ai passé une tonne d'heures à comprendre cela mais je ne pouvais pas.

J'ai stocké toutes les données fournies avec l'usine angulaire. Ce que j'aimerais réaliser, c'est que chaque fois que je clique sur un bouton, il déclenche un événement pour saisir une autre propriété, qui est également un autre ensemble de données, dans les données d'usine. Et ceux-ci seront affichés dans la zone de contenu avec ng-repeat.

Je vais joindre mon exemple de code ci-dessous pour votre information. Veuillez laisser tout conseil ou tout concept qui m'aidera à comprendre et à mieux comprendre cela. Merci pour votre temps!

//index.html
<div directive>
 <div class='buttons'>
   <p>Button A</p>
   <p>Button B</p>
   <p>Button C</p>
 </div>
 <div>
  <a ng-repeat='a in data'>{{a.title}} {{a.author}}</a>
 </div>
</div>
//app.js
app.directive('directive', ['factoryData', function(factoryData) {
 return {
  restrict: 'A',
  link: function ($scope, ele, attrs) {
   $scope.data = factoryData.firstProp;
   var btns = $(ele).find('p');
   p.on('click', function () {
    $scope.data = factoryData.secondProp;
    ...
    ...
   });
  },
 };
}]);
ngCoder

Vous devez utiliser $applydans votre directive lorsque vous essayez de lier les nouvelles données à la portée hors du contexte angulaire.

app.directive('directive', ['factoryData', function(factoryData) {
 return {
  restrict: 'A',
  link: function ($scope, ele, attrs) {
   $scope.data = factoryData.firstProp;
   var btns = $(ele).find('p');
   p.on('click', function () {
    $scope.$apply(function() { // use $apply to set the data..in scope
    $scope.data = factoryData.secondProp;
     });
    ...
    ...
   });
  },
 };
}]);

Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.

En cas d'infraction, veuillez [email protected] Supprimer.

modifier le
0

laisse moi dire quelques mots

0commentaires
connexionAprès avoir participé à la revue

Articles connexes

AngularJS: ng-repeat avec liste dynamique, sans reconstruire l'arborescence DOM entière?

Directive isoler la portée avec la portée ng-repeat dans AngularJS

Directive AngularJs avec contrôleur dynamique et modèle

Modification de la taille du parent de la directive AngularJS

Test du contenu de la page dynamique angulaire (ng-if) avec Geb

AngularJS: Directive mettant à jour la portée parent à l'intérieur de ng-repeat

Comment copier à l'aide de clipboard.js avec du contenu dynamique et des déclencheurs

Enregistrer la mise en page AvalonDock avec du contenu dynamique

Comment créer du contenu dynamique (variable) avec angularjs?

Modification du contenu d'une ligne avec re et recherche

Ajouter du contenu dynamique avec des éléments d'URL

La directive Collapsable personnalisée angulaire échoue lorsqu'elle est enveloppée autour du contenu ng-repeat

angularjs et barre de boutons dynamique avec ng-repeat

Contenu de la directive dynamique AngularJS

Chargement de la directive (templateUrls dynamique) dans ng-repeat

filtre dynamique avec contenu dynamique Angularjs

angularjs ng-repeat avec json / object dynamique

Comment charger le contenu de la directive dynamique à l'aide d'AngularJS?

Ng-repeat et directive développent un élément de liste à la fois

Modification dynamique du contenu des données du popover à l'aide de Jquery / Javascript

Modification du modèle ng pour l'entrée dans ng-repeat en fonction du contenu

Contenu du formulaire dynamique Angularjs

Commander des données avec un filtre personnalisé à l'intérieur de la directive ng-repeat dans AngularJS

Angularjs - Obtenir le $ index du premier ng-repeat et l'utiliser pour le deuxième ng-repeat

Luttant avec l'usine de fonction et la fermeture

Problèmes de communication entre la directive et le contrôleur avec ng-repeat

Directive AngularJS avec isolat scope, ng-repeat et controllerAs

la modification du contenu HTML de l'élément avec du texte dégradé ne s'affiche pas dans Chrome

Comment créer la hauteur et la largeur du panneau d'amorçage avec un contenu dynamique

TOP liste

  1. 1

    Existe-t-il un moyen de voir si mon bot est hors ligne ?

  2. 2

    Comment imprimer le nombre d'observations dans un fichier externe - sélection avec où appliqué?

  3. 3

    Obtention d'une erreur lors de la tentative d'utilisation du serveur proxy dans Node.js / Puppeteer

  4. 4

    Quelle est la relation entre le modèle et le tableau ? C'est compliqué

  5. 5

    Comment utiliser plusieurs entrées dans une boucle?

  6. 6

    J'ai besoin de savoir si ces deux phrases sont les mêmes en programmation

  7. 7

    récupérer une valeur de clé spécifique à partir d'un tableau multidimensionnel

  8. 8

    Passer la taille d'un tableau 2D à une fonction ?

  9. 9

    Comment faire une requête HTTP GET manuellement avec netcat?

  10. 10

    Ajout de préférences de portlet dans Liferay 7

  11. 11

    Déverrouiller le bouton avant d'appeler une fonction

  12. 12

    Comment arrêter l'enregistrement d'une base de données jusqu'à ce qu'un code de validation soit accepté par e-mail dans C # WinForms

  13. 13

    Tableau PHP dans une table utilisant implode ()

  14. 14

    Accédez à docker.sock depuis l'intérieur d'un conteneur

  15. 15

    php ajouter et fusionner des données de deux tables

  16. 16

    PubNub: Quelle est la bonne façon d'enregistrer tous les messages publiés dans ma base de données

  17. 17

    Comment prévisualiser des fichiers dans une application Java?

  18. 18

    Dans matlab intégrer une fonction qui appelle une autre fonction

  19. 19

    Comment déterminer la progression lors de la lecture d'un fichier

  20. 20

    L'abonnement Python du kit AWS IoT SDK renvoie true mais le paramètre de rappel n'est pas appelé

  21. 21

    Comment accéder au pool de threads par défaut dans l'application Windows 10 C ++?

chaudétiquette

Archive