当使用NG类设置名称时，如何启动AngularJS指令

Question

我几乎没有显示高仓库的AngularJS指令（MyGrapheff，myGraphenergy，..）。

现在，我需要使用一个侧边栏显示这些图形，以" li"元素显示每个图的名称，并在单击它们时，我加载了相应的图。

这是我的控制器。

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;
        }); 
    }
});

这是我的HTML代码

<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>

我的指示结构像这样

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);
    }
  }
});

现在问题是如果我加载指令，

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

该图成功加载。
，但是如果我用ng-class加载它，则该指令的内容不会加载。

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

但是，当我在浏览器上检查渲染的HTML时，我可以看到以下内容，

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

使用NG级更改指令不起作用。
简而言之，我要实现的是，当用户单击其名称时，更改图。这样做的原因是什么？我该如何解决？

Answer 1

将限制为a，而不是将指令用作属性。