expand page element in a modal

Question

I have a widget in the page that shows google chart for some data with couple of filters to filter the chart data and with a print icon to print it.

I want to add a button to open this same widget with the chart, filters and print functionality working in a modal with a larger screen view. because the widget is small in the page.

I have tried to add a button, and added a function for this button in the link function to open element.html() in a modal, the html worked but the issue is that the filters and the print are not functional .

What's wrong with element.html() ? I have tired to use $compile but it got me into many errors. what can I use?

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(), {});      
                    } 
                }
        }

note that $rootScope.openModal is just a wrapper service that uses the $modal service, takes a title and a body

We can't tell what is wrong with your use of `element.html()` when you don't include that code. In general AngularJS directives need to be compiled with the $compile service. They will not work if simply added with `element.html()`. If you get errors using the $compile service, we need to see that code and the complete text of those error messages. — georgeawg, Jun 18 '17 at 16:42

score 0 · Answer 1 · answered Jun 18 '17 at 15:10

0

I think we have some issue with design.

To sort things out:

You have some logic (in your case "widget with the chart, filters and print functionality")

This logic should be implemented in directive or component (1.5+).

So directive name is widget like you did.

This directive you can implement in main page (what you did so far) or as part of modal. The modal is wrapper only for your widget. So create new emplty modal, put inside <widget title="xx" options=someOptions></widget> on you are fine

Since you have isolate scope directive I don't see any problem to make it work.

answered Jun 18 '17 at 15:10

Maxim Shoustin

77,483
27
203
225

the problem is that the filters are not functioning, so after the modal opens if I add console.log inside the filter function, or the print function , and click on those from inside the modal .. nothing happens – sisimh Jun 18 '17 at 15:16
Every modal has his own scope, so check if scope is updated – Maxim Shoustin Jun 18 '17 at 15:37

expand page element in a modal

1 Answers1