J'ajoute quelques divs dans ma page HTML à l'intérieur de Angular controller:

jQuery("#mytag").after('<div ng-click="sayHi()">Hi</div>');

Et la méthode sayHi est une Angular méthode à l'intérieur de controller:

$scope.sayHi = function () {
        alert("hi");
};

Mais ng-click à l'intérieur de ces Div créés dynamiquement ne fonctionne pas! Pourquoi?

1
Fcoder 18 juil. 2015 à 23:33

2 réponses

Meilleure réponse

Donc au lieu de jQuery("#mytag").after('<div ng-click="sayHi()">Hi</div>');

Tu aurais dû:

function myTag() {

    return {
        link: function(element) {
            element.after('<div ng-click="sayHi()">Hi</div>');
        }
    }
}
angular.module('yourModule').directive('myTag', myTag);

Ensuite, à votre avis, au lieu de faire quelque chose comme:

<div id="mytag"></div>

Tu aurais dû:

<my-tag></my-tag>   or   <div my-tag></div>

Mettre à jour Comme @Claies le souligne, cela ne constitue pas non plus une approche propre d'un défilement de charge plus ou infini.

Je ne connais pas les détails de ce que vous essayez de faire, alors je vais faire certaines hypothèses.

Supposons que nous savons que vous n'avez qu'environ 100 enregistrements à afficher. L'utilisateur ne veut probablement voir que les 20 premiers, mais l'utilisateur devrait alors avoir la possibilité d'en voir 20 de plus après cela, et encore ... jusqu'à ce que les 100 enregistrements soient affichés.

Dans ce scénario, il serait probablement correct de charger tous ces enregistrements dans le navigateur et de les filtrer côté client dans Angular. Encore une fois, ce n'est peut-être pas votre situation. Je ne sais pas ce que vous voulez faire.

Donc, à votre avis, vous pouvez avoir un filtre qui limite ces derniers aux 20 premiers enregistrements. Ensuite, effectuez une action qui augmente le filtre de 20 enregistrements. Lorsque la limite du filtre est supérieure ou égale au nombre d'enregistrements, masquez le bouton Afficher plus.

<div ng-repeat="record in vm.records | limitTo : vm.display">
    {{ record }}
</div>
<button ng-show="vm.enableLoadMore" ng-click="vm.showMore()">Load More</button>

Dans votre contrôleur pour cette vue, en utilisant la syntaxe controllerAs:

function RecordsController() {

     this.records = [ . . . ]; // your records

     this.display = 20; // number of records to display

     var self = this;

     Object.defineProperty(this, 'enableLoadMore', { get: function() {
         return self.records >= self.display;
     }})
}

RecordsController.prototype.showMore = function() {
    this.display += 20;
}
2
Martin 18 juil. 2015 à 21:58

Angular compile le html lorsqu'il est initialisé pour la première fois seulement, si vous voulez le recompiler, vous pouvez injecter le service $ compile dans votre contrôleur et l'utiliser comme ceci

$compile(element)(scope)

Mais ce n'est pas une bonne façon d'ajouter dynamiquement des éléments en angulaire, pouvez-vous me dire exactement ce que vous essayez de construire?

2
Ahmed Eid 18 juil. 2015 à 21:20