how to get a diffrent html form when clicking each treenod?

Question

hi,ive created a treeview using angular js,mvc and html..tree view is working fine ..but i have 3 diffrent html.. i should get each one when clicking nodes..how can i achive that her?please help

[im getting selected value through alert]

 

 

treeview.js

**********

/*

tree-id : each tree's unique id.

tree-model : the tree model on $scope.

node-id : each node's id

node-label : each node's label

node-children: each node's children

data-angular-treeview="true"

data-tree-id="tree"

data-tree-model="roleList"

data-node-id="roleId"

data-node-label="roleName"

data-node-children="children" >

*/

(function (angular) {

//use strict--all code in the script will execute in strict mode,no undeclared values

'use strict';

angular.module('angularTreeview', []).directive('treeModel', ['$compile', function ($compile) {

return {

// restrict: 'A'--'A' - only matches attribute name

restrict: 'A',

link: function (scope, element, attrs) {

//tree id

var treeId = attrs.treeId;

//tree model

var treeModel = attrs.treeModel;

//node id

var nodeId = attrs.nodeId || 'id';

//node label

var nodeLabel = attrs.nodeLabel || 'label';

//children

var nodeChildren = attrs.nodeChildren || 'children';

//tree template

var template =

'

' +

'

' +

'' +

'' +

' ' +

'{{node.' + nodeLabel + '}}' +

'

' +

'' +

'';

//check tree id, tree model

if (treeId && treeModel) {

//root nodee

if (attrs.angularTreeview) {

//create tree object if not exists

scope[treeId] = scope[treeId] || {};

//if node head clicks,

scope[treeId].selectNodeHead = scope[treeId].selectNodeHead || function (selectedNode) {

//Collapse or Expand

selectedNode.collapsed = !selectedNode.collapsed;

};

//if node label clicks,

scope[treeId].selectNodeLabel = scope[treeId].selectNodeLabel || function (selectedNode) {

//remove highlight from previous node

if (scope[treeId].currentNode && scope[treeId].currentNode.selected) {

scope[treeId].currentNode.selected = undefined;

}

//set highlight to selected node

selectedNode.selected = 'selected';

alert(selectedNode.FileName); 

//set currentNode

scope[treeId].currentNode = selectedNode;

};

}

//Rendering template.

element.html('').append($compile(template)(scope));

}

}

};

}]);

})(angular);

 

 

 

index.cshtml

*************

@{

ViewBag.Title = "Index";

}

<!-- Inject Script Filtered -->

<!-- Inject Script Filtered -->

<!-- Inject Script Filtered -->

<!-- Inject Script Filtered -->

AngularJS Tree view

data-tree-id="mytree"

data-tree-model="List"

data-node-id="FileID"

data-node-label="FileName"

data-node-children="Childs">

<!-- Inject Script Filtered -->

 

 

 

************ 

1.AUSTRIA

A

B

2.INDIA

A

B

3.ITALI

A

B

this is how here tree is loadingin each country and childs ive diffrent diffrent html submit form..how can i achive it? ng-clik is not working here