développez élément de page dans un modal

Question

J'ai un widget dans la page qui montre google chart pour certaines données avec quelques filtres pour filtrer les données du graphique et avec une icône d'impression pour l'imprimer.

Je veux ajouter un bouton pour ouvrir ce même widget avec le graphique, les filtres et les fonctionnalités d'impression fonctionnant dans un modal avec une vue d'écran plus grande. parce que le widget est petit dans la page.

J'ai essayé d'ajouter un bouton, et ajouté une fonction pour ce bouton dans la fonction de lien pour ouvrir element.html() dans un modal, le html a fonctionné mais le problème est que les filtres et l'impression ne sont pas fonctionnels.

Qu'est-ce qui ne va pas avec element.html()? Je suis fatigué d'utiliser $ compile mais cela m'a causé beaucoup d'erreurs. Que puis-je utiliser?

app.directive("widget", function ($rootScope) { 
     return { 
       restrict: "EA", 
       scope: { 
         title: '=', 
         options: '=' 
       }, 
       transclude: true, 
       templateUrl: "widget.html", 
       link: function(scope, element, attrs, ctrl, transclude) { 
        scope.print = function() {....} 
        scope.filterChart = function() {....} 

        scope.expand = function() { 
         $rootScope.openModal("expand Modal", element.html(), {});  
        } 
       } 
     } 

Notez que $ rootScope.openModal est juste un service d'emballage qui utilise le service modal $, prend un titre et un corps

Answer 1

Je pense que nous avons une certaine question avec la conception.

Pour trier les choses:

Vous avez une certaine logique (dans votre cas « widget avec le tableau, les filtres et la fonctionnalité d'impression »)

Cette logique doit être mis en œuvre directive ou component (1.5+) .

Le nom de la directive est widget comme vous l'avez fait.

Cette directive vous permet de mettre en œuvre dans la page principale (ce que vous avez fait jusqu'à présent) ou dans le cadre de modal. Le modal est wrapper uniquement pour votre widget. Donc, créer un nouveau modal emplty, mettre à l'intérieur <widget title="xx" options=someOptions></widget> sur vous êtes bien

---

Puisque vous avez isoler la directive scope Je ne vois pas de problème pour le faire fonctionner.