Add Directive programatically using $compile and pass data from scope,

Question

I have created a directive named ng-chart as:

(function () {
'use strict';
angular
    .module('app')
    .directive('ngChart', ['$http', '$compile', 'DashboardService', '$q', '$timeout', '$modal', 'FlashService', function ($http, $compile, DashboardService, $q, $timeout, $modal, FlashService) {

        return {
            restrict: 'E',
            scope:
            {
                chartObj: "=?"
            },
            template: "" +
                "" +
                "" +
                "
" +
                "" +
                "",

            link: function (scope, iElement, iAttrs, ctrl)
            {
                scope.iElement = iElement;
                $(iElement).on('resize', function () {
                    scope.resize(iElement);
                });

                $(iElement).resizable();
                $(iElement).draggable();

                alert(scope.chartObj.dashUserElementId);

                scope.$watch('chartObj', function (chartData) {

                    if (chartData != "" && chartData != undefined) {
                        $timeout(function () {

                            var elem_id = scope.chartObj.dashUserElementId; //Element id.
                            var elem_data_source = scope.chartObj.dashUserElementDataSource; //Data query to retrive the data from database.
                            var displaytypeid = scope.chartObj.dashUserElementConfigDisplayTypeId; // Display type id of current element.


                            var divContainer = iElement.find('div');
                            scope.containerToDisplay = divContainer[1];
                            var dataObject = JSON.stringify({ "element_id": elem_id, "dataquery": elem_data_source, "Configurable": scope.chartObj.dashuserelement_date_range_origin });
                            //Return data series, Query parameter, and column name.
                            DashboardService.drawDashboardElement("getElementDataQuery", dataObject).then(function (response) {
                                var resultD = JSON.parse(response.d);
                                //If result is not empty then call drawChart method with passing parameter ResultD , displaytypeId and container to display.
                                if (resultD != undefined && resultD != "")
                                    scope.drawChart(resultD, displaytypeid, scope.containerToDisplay, elem_id);
                            },
                            function (error) {
                                // promise rejected, could log the error with: 
                                console.log('error', error);
                            });

                        }, 0);
                    }

                });

            },
            controller: function ($scope) {

                $scope.drawChart = function (resultD, displaytypeid, divId,elementId) {}  // some other charting code/functions here   }  }]); })();

The above snippet is of my directive which are called on my html view using ng-repeater as

Now What i want to achieve is I want to add one more chart to my dashboard at runtime on charts series click event(I have used Highchart.js) for the same. So if user drags in or clicks on any section of the pie chart I want to draw one more ng-chart at runtime. here is what I am trying:

    var template = "";

    var newElement = $compile(template)($scope);

    $("#divChart").append(newElement);

    $scope.insertHere = newElement;

But this does not seems to be working,anything missing/wrong in the code above ? I want to pass chart-Obj available in the current scope of the directive to new directive of same type(ng-chart)

Pepijn · Accepted Answer

You're making one tiny mistake, angular doesn't $compile your object variable. Instead it looks for the variable on the scope by referencing it.

So your fix would be:

var template = '';

Next you would you want to create the compiled element first, and then add it to the $scope.

So like this:

var element = angular.element(template);

var compiled = $compile(element);

$('#divChart').append(element);

$timeout(function() {
    compiled($scope);
});

Also the $scope.$watch in your directive link function won't work, because it's a deep object, and you should add as a third parameter true if you want $scope.$watch. But because you defined the object in your scope as a two-way binded variable. You don't even need it.

Add Directive programatically using $compile and pass data from scope,

Answers (1)

Related Questions