How to initiate AngularJs directive when its name is set with ng-class

Question

I have few AngularJS directives to show Highstock graphs(myGraphEff,myGraphEnergy,..).

Now I need to display these graphs with a sidebar displaying the names of each graphs with "li" elements and while clicking them I load corresponding graph.

Here's my controller.

var app = angular.module('app', []); 
app.controller('myController', function($scope,$http) {

    $scope.showingGraphs= [{name:"My Graph Eff",dir:"my-graph-eff"},{name:"My Graph Energy",dir:"my-graph-energy"}];

    $scope.displaingGraph= $scope.showingGraphs[0].dir;

    $scope.loadData = function(graphType){

        $scope.displaingGraph= graphType;
        $http.get('/reports/get-graph-data',{params:{"chartType": graphType}})
        .then(function(response) {
             $scope.data = response.data;
        }); 
    }

});

Here's my HTML code

<div class="box-content">
        <div class="span8">
            <div ng-class="displaingGraph" items="data" style="height: 296px;"></div>
        </div>

        <div class="sparkLineStats span4 widget green" onTablet="span5" onDesktop="span4" >

            <ul  class="unstyled onhover" >
                <li ng-repeat="graph in showingGraphs" ng-click="loadData(graph.dir);">{{ graph .Name }}</li>
            </ul>
        </div>
    </div>

My directive structure goes like this

app.directive('myGraphEff', function () {
  return {
    restrict: 'C',
    replace: true,
    scope: {
      items: '='
    },
    controller: function ($scope, $element, $attrs) {

    },
    template: '<div id="container" style="margin: 0 auto">not working</div>',
    link: function (scope, element, attrs) {
      var chart = new Highcharts.stockChart({
        chart: {
          renderTo: 'container',
          type: 'area'
        },
        title: {
          text: 'my graph eff'
        }

      });
      scope.$watch("items", function (newValue) {
        chart.series[0].setData(newValue, true);
      }, true);

    }
  }
});

Now the problem is if I load the directive with,

<div class="my-graph-eff" items="data" style="height: 296px;"></div>

The graph loads successfully.
But if I load it with ng-class the content of the directive does not load.

<div ng-class="displaingGraph" items="data" style="height: 296px;"></div>

But when I check the rendered HTML on browser I can see following,

<div ng-class="displaingGraph" items="data" style="height: 296px;" class="my-graph-eff"></div>

Using ng-class to change the directive is not working.
Simply what I am trying to achieve is, change the graph when user click it's name. What would be the reason for this and how can I fix this ?

Possible duplicate of ng-class will not trigger on custom directive — jkris
– jkris, Commented Dec 2, 2016 at 3:35

Dayachand Patel · Accepted Answer · 2016-12-02 03:55:03Z

0

Change restrict C to A and than use directive as a attribute.

answered Dec 2, 2016 at 3:55

Dayachand Patel

4977 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to initiate AngularJs directive when its name is set with ng-class

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related