I'm trying to use angularui-tree and after days of struggle to make it run inside Vistulaforce(salesforce) page, it still shows some error or the other. Now I'm trying to run basic nested tree ui example but it's throwing an error and I can't see why when I'm doing all as per their instructions. Could anyone pl. help me understanding what's going wrong.
visualforce page
<apex:page showHeader="false">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.4/angular.min.js"/>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-tree/2.22.1/angular-ui-tree.min.css"/>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-tree/2.22.1/angular-ui-tree.min.js"/>
<link rel = "stylesheet" href = "https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"/>
<script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular-sanitize.js"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['ui.tree']);
app.controller('treeCtrl', function($scope) {
$scope.tree1 = [];
$scope.tree1 = [{
'id': 1,
'title': 'tree1 - item1',
'nodes': []
}, {
'id': 2,
'title': 'tree1 - item2',
'nodes': []
}, {
'id': 3,
'title': 'tree1 - item3',
'nodes': []
}, {
'id': 4,
'title': 'tree1 - item4',
'nodes': []
}];
$scope.tree2 = [{
'id': 1,
'title': 'tree2 - item1',
'nodes': []
}, {
'id': 2,
'title': 'tree2 - item2',
'nodes': []
}, {
'id': 3,
'title': 'tree2 - item3',
'nodes': []
}, {
'id': 4,
'title': 'tree2 - item4',
'nodes': []
}];
$scope.remove = function (scope) {
scope.remove();
};
$scope.toggle = function (scope) {
scope.toggle();
};
$scope.newSubItem = function (scope) {
var nodeData = scope.$modelValue;
nodeData.nodes.push({
id: nodeData.id * 10 + nodeData.nodes.length,
title: nodeData.title + '.' + (nodeData.nodes.length + 1),
nodes: []
});
};
});
<div ng-app="MyApp">
<div ng-controller="treeCtrl">
<div ui-tree="ui-tree">
<ol ui-tree-nodes="" ng-model="tree1" id="tree-root">
<li ng-repeat="node in tree1" ui-tree-node="ui-tree-node" ng-include="'nodes_renderer.html'"></li>
</ol>
</div>
<script type="text/ng-template" id="nodes_renderer.html">
<div ui-tree-handle="ui-tree-handle">
{{node.title}}
</div>
<ol ui-tree-nodes="" ng-model="node.nodes">
<li ng-repeat="node in node.nodes" ui-tree-node="ui-tree-node" ng-include="'nodes_renderer.html'">
</li>
</ol>
</script>
</div>
</div>
Error message:
