Issue with Angular UI grid Tree View when working with Typesript

问题:

Below is a usual angularJS html sample using ui-grid-tree-view, which renders properly.

<div id="grid1" ui-grid="gridOptions" ui-grid-tree-view class="grid">

when converting the code to typescript, ui-grid-tree-view directive is not rendering, even the pre function in the directive is not being reached.

For typescript code, "gridOptions" is being added as a public var to the controller class. Relevant code sample:

export class MyController{     constructor(){         this.gridOptions = {             columnDefs: [                 { name: 'Name', width: '15%' },                 { name: 'Description', width: '15%' },                 { name: 'IsActive', cellTemplate: '<ul ng-if="row.entity.IsActive == true"><li style="color:green"></li></ul><ul ng-if="row.entity.IsActive== false"><li style="color:red"></li></ul>', width: '10%' }             ]         }     } }

Created the required dataArray for tree view using a recursion function. Using in HTML:

<div ng-controller="MyController as ctrl"     <div id="grid1" ui-grid="ctrl.gridOptions" ui-grid-tree-view class="grid"></div> </div>

Any suggestions are welcome.

回答1:

You need to set this controller as an Angular Controller.

You miss this stuff

var myModule = angular.module('myModule', []); myModule.controller('myController', [()=> {new MyController()}]);

and @ the html you should write is:

ng-controller='myController'

You also missed the concept of $scope...

回答2:

I think it was one of my team members who asked this question.. sorry for coming back late.

The issue was resolved after adding the dependency for ui.grid.treeView in the angular dependency list.

The portions which @oded recommended are the ones which are not included here in the sample. Lastly, just to clarify, this is angular 1 to typescript.

转载请标明出处:Issue with Angular UI grid Tree View when working with Typesript

文章来源: Issue with Angular UI grid Tree View when working with Typesript