Javascript 在指令中定义范围并在视图中使用

我正在使用

角度树视图指令

。在这里，加载树需要一些时间，所以我想展示一个微调器。因此，我想在指令中定义一个变量，该变量将在视图中使用，以便显示微调器

**angular-treeview.js**

(function ( angular ) {
    'use strict';

    angular.module( 'angularTreeview', [] ).directive( 'treeModel', ['$compile', function( $compile) {
            return {
                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';

                    //node class
                    var nodeClass = attrs.nodeClass || 'type';

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

                    //search by label
                    var searchQuery = attrs.searchQuery || '';

                    //function for highlighting search text
                    var searchHighlightFunction = attrs.searchHighlightFunction ||
                        function (content, text) {
                            return content
                        };

                    //css class to be added for highlighting
                    var searchHighlightClassName = attrs.searchHighlightClassName || '';

                    //filter to be used with search query
                    var searchFilter = attrs.searchFilter || '';

                    //tree template
                    var template =
                        '<ul>' +
                            '<li data-ng-repeat="node in ' + treeModel + '| ' + searchFilter + ':' + searchQuery + '" data-ng-init="node.collapsed=true">' +
                                '<i class="collapsed  {{node.' + nodeClass + '}}" data-ng-show="node.' + nodeChildren + '.length && node.collapsed" data-ng-click="' + treeId + '.selectNodeHead(node)"></i>' +
                                '<i class="expanded {{node.' + nodeClass + '}}" data-ng-show="node.' + nodeChildren + '.length && !node.collapsed" data-ng-click="' + treeId + '.selectNodeHead(node)"></i>' +
                                '<i class="normal {{node.' + nodeClass + '}}" data-ng-hide="node.' + nodeChildren + '.length"></i> ' +
                                '<span data-ng-class="node.selected" data-ng-click="' + treeId + '.selectNodeLabel(node)" ' +
                                    'ng-bind-html="' + searchHighlightFunction + '(node.' + nodeLabel + ', ' + searchQuery + ', \'' + searchHighlightClassName + '\', true)"></span>' +
                                '<div data-ng-hide="node.collapsed" data-tree-id="' + treeId + '" data-tree-model="node.' + nodeChildren +
                                    '" data-node-id=' + nodeId + ' data-node-label=' + nodeLabel + ' data-node-children="' + nodeChildren + '"' +
                                    ' data-node-class="' + nodeClass + '" data-search-query="' + searchQuery + '" data-search-highlight-function="' + searchHighlightFunction + '"' +
                                    ' data-search-highlight-class-name="' + searchHighlightClassName + '" data-search-filter="' + searchFilter + '"></div>' +
                            '</li>' +
                        '</ul>';


                    //check tree id, tree model
                    if( treeId && treeModel ) {
                        /*
                        * to expand or collapse nodes on search text changes
                        */
                        scope.$watch(searchQuery, function (newVal, oldVal) {
                            var node = scope.node;
                            if (newVal) {
                                if (newVal.length > 0) {
                                    if (node) {
                                        if ((node[nodeChildren] && node[nodeChildren].length)
                                            || (node[nodeChildren] && node[nodeChildren].length)) {
                                            node.collapsed = false;
                                        }
                                    }
                                }
                            } else {
                                if (node && ((node[nodeChildren] && node[nodeChildren].length)
                                    || (node[nodeChildren] && node[nodeChildren].length))) {
                                    node.collapsed = (scope[treeId].expandedNodes.indexOf(node[nodeLabel]) < 0);
                                }
                            }
                        });

                        //root node
                        if( attrs.angularTreeview ) {
                            //create tree object if not exists
                            scope[treeId] = scope[treeId] || {};

                            //this is where we are storing nodes by user to distinguish between
                            // those expanded by user from those done for showing search results
                            scope[treeId].expandedNodes = [];
                            scope.$watch(treeModel, function(newVal, oldVal) {
                                if (newVal) {
                                    scope[treeId].expandedNodes = [];
                                }
                            });

                            //if node head clicks,
                            scope[treeId].selectNodeHead = scope[treeId].selectNodeHead || function( selectedNode ){
                                var expandedNodesIndex;

                                //Collapse or Expand
                                selectedNode.collapsed = !selectedNode.collapsed;
                                expandedNodesIndex = scope[treeId].expandedNodes.indexOf(selectedNode[nodeLabel]);
                                if (expandedNodesIndex > -1) {
                                    if (selectedNode.collapsed) {
                                        scope[treeId].expandedNodes.splice(expandedNodesIndex, 1);
                                    }
                                } else {
                                    if (!selectedNode.collapsed) {
                                        scope[treeId].expandedNodes.push(selectedNode[nodeLabel]);
                                    }
                                }
                            };

                            //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';

                                //set currentNode
                                scope[treeId].currentNode = selectedNode;
                            };
                        }

                        //Rendering template.
                        element.html('').append( $compile( template )( scope ) );
                    }
                }
            };
        }]);
})( angular );

**angular-treeview.js**
（功能（角度）{
"严格使用",；
angular.module（'angularTreeview'，[]）.directive（'treeModel'，['$compile'，function（$compile）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
//树id
var treeId=attrs.treeId；
//树模型
var treeModel=attrs.treeModel；
//节点id
var nodeId=attrs.nodeId | |“id”；
//节点标签
var nodeLabel=attrs.nodeLabel | |“label”；
//节点类
var nodeClass=attrs.nodeClass | | |“type”；
//孩子们
var nodeChildren=attrs.nodeChildren | | |“children”；
//按标签搜索
var searchQuery=attrs.searchQuery | |“”；
//突出显示搜索文本的功能
var searchHighlightFunction=attrs.searchHighlightFunction||
功能（内容、文本）{
返回内容
};
//要添加用于突出显示的css类
var searchHighlightClassName=attrs.searchHighlightClassName | |“”；
//要与搜索查询一起使用的筛选器
var searchFilter=attrs.searchFilter | |“”；
//树模板
变量模板=
“
”+
“
”+
'' +
'' +
' ' +
'' +
'' +
“
”+
“
”；
//检查树id、树模型
if（treeId&&treeModel）{
/*
*在搜索文本更改时展开或折叠节点的步骤
*/
范围.$watch（搜索查询，函数（newVal，oldVal）{
var节点=scope.node；
if（newVal）{
如果（newVal.length>0）{
如果（节点）{
if（（节点[nodeChildren]&&node[nodeChildren].length）
||（节点[nodeChildren]&节点[nodeChildren].length）{
node.collapsed=false；
}
}
}
}否则{
if（node&（（node[nodeChildren]&&node[nodeChildren].length）
||（节点[nodeChildren]&节点[nodeChildren].length）{
node.collapsed=（作用域[treeId].expandedNodes.indexOf（节点[nodeLabel]）<0）；
}
}
});
//根节点
如果（attrs.angularTreeview）{
//创建树对象（如果不存在）
范围[treeId]=范围[treeId]| |{}；
//这就是我们按用户存储节点以区分
//用户从显示搜索结果所做的扩展
作用域[treeId]。expandedNodes=[]；
范围$watch（树模型，函数（newVal，oldVal）{
if（newVal）{
作用域[treeId]。expandedNodes=[]；
}
});
//如果节点头单击，
作用域[treeId]。selectNodeHead=作用域[treeId]。selectNodeHead | |函数（selectedNode）{
var扩展节点索引；
//塌陷或膨胀
selectedNode.collapsed=！selectedNode.collapsed；
expandedNodeIndex=scope[treeId].expandedNodes.indexOf（selectedNode[nodeLabel]）；
如果（扩展节点索引>-1）{
如果（selectedNode.collapsed）{
作用域[treeId].expandedNodes.splice（ExpandedNodeIndex，1）；
}
}否则{
如果（！selectedNode.collapsed）{
作用域[treeId].expandedNodes.push（selectedNode[nodeLabel]）；
}
}
};
//如果单击节点标签，
作用域[treeId]。selectNodeLabel=作用域[treeId]。selectNodeLabel | |函数（selectedNode）{
//从上一个节点删除高亮显示
if（范围[treeId].currentNode&&scope[treeId].currentNode.selected）{
作用域[treeId].currentNode.selected=未定义；
}
//将高亮显示设置为选定节点
selectedNode.selected='selected'；
<div data-angular-treeview="true" data-tree-id="Treevalue"
                                data-tree-model="suggestionList" data-node-id="id" data-node-class="type" data-node-label="name"
                                data-node-children="childrens" data-search-query="suggestionListSearchText" data-search-highlight-function="highlightHTML"
                                data-search-highlight-class-name="searchText" data-search-filter="NameFilter">
                            </div>

<div data-angular-treeview="true" data-tree-id="Treevalue"
                            data-tree-model="suggestionList" data-node-id="id" data-node-class="type" data-node-label="name"
                            data-node-children="childrens" data-search-query="suggestionListSearchText" data-search-highlight-function="highlightHTML"
                            data-search-highlight-class-name="searchText" data-search-filter="NameFilter">
    <img src="spinner.gif">
</div>