Calling a custom directive from the contoller


#1

Hi Guys. I have a D3 chart that has its own directive and is called from the HTML page via tag.

What I am doing in my controller is rebuilding the data object that the directive uses. I have successfully done this. My issue now is now do I reload this directive, from my controller, to rebuild the chart with the new data?

HTML directive tag is

The directive is build with following snippet of code.
app.directive(‘treemap’, [’$compile’,function ($compile) {
return {
restrict: ‘E’,
scope: {
data: ‘=’,
parentElementId: ‘@’,
id: ‘@’,
colorLabel: ‘@’,
sizeLabel: ‘@’,
maxVal: ‘@’,
search: ‘@’
},

	link: function(scope, element, attrs){

New data is loaded into the data object $scope.componentsData

I can not inject this directive into my controller because it says

Error: [$injector:unpr] Unknown provider: $treemapProvider <- $treemap <- AccountHeatmapCtrl

Should i be injecting this directive or is there another way to call this directive?

Brian


#2

Hi @bknott,

They can provide another service or function that can be injected into the controller, but this may not always be the case.

Checkout the documentation on that treemap directive. The site might have APIs or services that you might need to call to force a reload.

If they do not provide a way to reload data, then you might have to do it manually. There should be a few ways to do it. Here is a sample: prepare two sets of the directive for on the HTML page, and assign an ng-if that you can then flip as to which is to use.

< treemap ng-if=“values.showThis” > < / treemap >
< treemap ng-if="!values.showThis" > < / treemap >

then in the code, it could look like this:

// prepare data

// switch / which is visible
$scope.values.show = !$scope.values.show;

That way, it should be able to destroy and to create directives.


Paul


#3

Just though I would respond to this post with updated information. I now have this treemap working and updating from a series of tm1-ui-subnm statements.

This is the original treemap that I used.
https://www.linkedin.com/pulse/custom-treemap-directive-poshak-maheshwari

The new directive has no exposed functions so you can’t rebuild the data with the controller and then refresh the treemap. What I did find was that the new directive had a watcher on the treemap data. I had to modify the watcher but, then I was able to issue the required tm1Ui.cubeExecuteMDX statement and rebuild the data. The tree would then automatically refresh.

Its a long process to explain it all here, so I wont go into all the code but here is a quick overview of the process.

When the page first loads an MDX statement is build based on the selections. This returns an object that contains all the data and dimensions. see below

var mdx1 = 'SELECT { [scenario].[actual],[scenario].[budget]} on 0,';
	mdx1 = mdx1 + '{([account_tb].[canvas-mine cash cost accounts])} on 1 ';
	mdx1 = mdx1 + 'FROM [trial_balance]';
	mdx1 = mdx1 + 'where ([year].['+$scope.selections.finYear+'],[month].['+filterMonth+'],[company].['+$scope.selections.company+'],[lob].[total lob],';
	mdx1 = mdx1 + '[measure_tb].[$],[value].[total_value],[identifier].[total identifier],[activity].[total activity],[location].[total location])';

	$tm1Ui.cubeExecuteMdx('Wesfarmers_prod', mdx1).then(function(returnedData){

I then issue a $tm1Ui.dimensionElements to get the tree hierarchy. See below

$tm1Ui.dimensionElements('Wesfarmers_prod', 'account_tb', '' , 'Canvas-mine cash cost accounts', '', '', '',true,false).then(function(dimData){

I then use JavaScript to loop through the dimension data and then the returned MDX data to populate a new chart data object. This allow me to build the data with only 2 TM1 calls. The grunt is done in JavaScript and takes less than a second, including the TM1 calls.

Once the data is build I assign it to the treemap data object and the tree map updates.

Image below of the Treemap now working in Canvas.

Brian