rafraîchir angularjs personnalisé directive

Je suis à l'aide de carrousel (https://market.ionic.io/plugins/morph-carousel) dans un ioniques projet. C'est une coutume angularjs directive. Je suis à l'aide de 2 carrousels dans un seul écran. Maintenant, ce que je veux, c'est que sur le changement de 1er carrousel de la deuxième carrousel devrait également mis à jour avec la nouvelle valeur. Et pour ce faire, le 2ème carrousel personnalisé directive doit être rechargé/actualisée. Est-il un moyen de rafraîchir personnalisé directives angularjs?

  • peut-être dans le link fonction de la deuxième directive, vous pouvez utiliser $scope.watch de suivre les modifications de la première directive sur les variables du modèle?
InformationsquelleAutor anuj trehan | 2016-04-02
  1. 2

    Ajouter un guetteur de la première directive en link fonction.

    scope.$watch('thingToWatchForRefershing', function (newValue, oldValue) {
    if (!newValue || angular.equals(newValue, oldValue)) {
        return;
    }
    scope.$emit('somethingChangedInFirstDirective', dataToBePassed);
});

    Maintenant, dans votre deuxième directive, ont rendu la fonction qui, lorsqu'il est appelé à actualiser les modèles et les points de vue et également ajouter un écouteur.

    link: function () {
    scope.render = function () {
        //all logic goes here
    };
    scope.$on('somethingChangedInFirstDirective', function (ev, data) {
        //render everything again i.e. reload the directive
        scope.render();
    });
    //first time rendering
    scope.render();
}

    Espère que cela aide 🙂

    Mise à jour:

    1. Passer un attribut de la première directive. par exemple: <custom-carousel data-is-to-be-watched="isToBeWatched" /> et dans votre contrôleur de jeu: $scope.isToBeWatched = true. Aussi, pour la deuxième directive utilisation: <custom-carousel data-is-tobe-reloaded="isToBeReloaded" /> et dans le même contrôleur initialiser: $scope.isToBeReloaded = false;
    2. Si elle est isolée de la directive, ayant son propre champ d'application, puis:
      ont ce scope:{isToBeWatched: '=?', isToBeReloaded: '=?'}, link: function (...) {...}
    3. Une fois que la directive est chargé, vérifiez if (scope.isToBeWatched), c'est vrai, cela signifie que la première directive est chargé/changé depuis que nous avons passé le attr seulement dans la première directive. Maintenant, émettent un événement, qui sera écouté dans le contrôleur. Dans son auditeur: $scope.isToBeReloaded = true; qui à son tour permettra de définir la variable isToBeReloaded dans la deuxième directive, puisque nous sommes passés en 2ème directive.
    4. Ont un observateur pour isToBeReloaded et de recharger le rendre fn comme je l'ai mentionné plus tôt.

    Rugueux code:

    Contrôleur:

    $scope.isToBeWatched = true;
$scope.isToBeReloaded = false;

$scope.$on('somethingChangedInFirstDirective', function () {
    $scope.isToBeReloaded = true;
});

    Directive:

    scope: {
isToBeWatched: '=?',
isToBeReloaded: '=?'
},
 link: function (scope) {
 scope.render = function () {
    if (scope.isToBeWatched) {
        scope.$emit('somethingChangedInFirstDirective');
    }
 };
 scope.render();

scope.$watch('isToBeReloaded', function (newValue, oldValue) {
    if (!newValue || angular.equals(newValue, oldValue)) 
         return; 
    scope.render();
})

}
    • Mais c'est la même directive, qui est utilisé deux fois. Comment peut-on avoir un lien séparé de la fonction pour eux?
    • Voir ma mise à jour sur la même réponse 🙂
    • J'ai été en mesure d'appeler la fonction de lien de nouveau, mais j'ai aussi besoin de recharger votre modèle. Comment cela peut-il être fait?
    • À l'aide de la double liaison dans votre modèle, de sorte que chaque fois que votre contrôleur/directive mises à jour, les changements de vue automatiquement à l'aide de ng-bind/ {{...}}
    • Il a travaillé merci!
    • Plaisir à entendre 🙂
    • anuj je ne comprends pas u peut m'expliquer brièvement..

    InformationsquelleAutor softvar