What is right Angular way for triggering handsontable loadData by mouse click

Question

I create directive that loads jquery handsontable in a true Angular way. But this is the true way only for the first loading of handsontable. What if I need to change table data after the mouse click?

var gmApp = angular.module('gmApp', ['gmServices']);
gmApp.directive('myChart', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).handsontable(scope.$eval(attrs.myChart));
        }
    };
}); 

I also created list which firing showVariable() function

 <ul>
      <li ng-repeat="variable in list" ng-click="showVariable(variable.id)">{{variable.name}}</li>
 </ul>

This function fire loadData in my controller:

$scope.showVariable = function(id) {
     $('#myChart').handsontable('loadData', $scope.data[id]);
};

But seems that this is changing the DOM inside the controller and not a true angular way. What is the right angular way for doing handsontable('loadData')?

Answer 1

Move showVariable to the link function of your directive:

    link: function(scope, element, attrs) {
        $(element).handsontable(scope.$eval(attrs.myChart));

        scope.showVariable = function(id) {
           $('#myChart').handsontable('loadData', $scope.data[id]);
        };
    }