找不到指令'ngInclude‘所需的控制器'uiTreeNodes’

Question

我正在尝试使用angularui-tree，经过几天的努力才使它在Vistulaforce(salesforce)页面中运行，它仍然显示出这样或那样的错误。现在我正在尝试运行基本的嵌套树ui示例，但它抛出了一个错误，当我按照他们的说明执行所有操作时，我不明白为什么。有没有人能。帮我弄清楚哪里出了问题。

visualforce页面

<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>

​

错误消息：

​

Answer 1

以下是angular-ui-tree的示例代码

https://jsfiddle.net/hardiksondagar/gt00pr9x/

注意: jQuery不是必需的，因为angular-ui-tree是基于纯Javascript的