Question

快速提问，我正在使用Gitlab Doku循环浏览json文件并输出以下树。（见附图）

问题是，当＆＃34;树＆＃34;变得很长有一些严重的性能问题，因为浏览器需要渲染很多项目。（我说的是1000或更长）。所以我试图做的最初只是加载前2级，其余的将被折叠。当用户单击每个元素的展开箭头时，我需要渲染其子元素。（如果这是有道理的）。所以基本上再次运行tg-dynamic-directive。

当页面开始渲染并且函数返回模板并且触发了html时，我要检查它是否是前2个级别：

$scope.getView = function (item) {

        // Check if item is defined
        if(typeof item != 'undefined') {

            // Load course, label and module first!
            if(item.type == 'course' || item.type == 'label' || item.type == 'module' || item.type == 'course_assessment' || item.type == 'module_assessment') {
                // Return Template
                return 'nestable_item.html';
            } else {
                // Otherwise return null
                return null;
            }
        } else {
            return null;
        }
    };

然后我需要做的是在单击展开箭头时再次调用该指令。

这是指令：

angular.module('tg.dynamicDirective', [])
    .directive('tgDynamicDirective', ['$compile',
        function($compile) {
            'use strict';

            function templateUrlProvider(getView, ngModelItem) {
                if (getView) {
                    if (typeof getView === 'function') {
                        var templateUrl = getView(ngModelItem) || '';
                        if (templateUrl) {
                            return templateUrl;
                        }
                    } else if (typeof getView === 'string' && getView.length) {
                        return getView;
                    }
                }
                return '';
            }

            return {
                restrict: 'E',
                require: '^ngModel',
                scope: true,
                template: '<div ng-include="templateUrl"></div>',
                link: function(scope, element, attrs, ngModel) {

                    scope.$watch(function() {
                        var ngModelItem = scope.$eval(attrs.ngModel);
                        var getView = scope.$eval(attrs.tgDynamicDirectiveView);
                        scope.ngModelItem = ngModelItem;
                        return templateUrlProvider(getView, ngModelItem);
                    }, function(newValue, oldValue) {
                        scope.templateUrl = newValue;
                    });
                }
            };
        }
    ]);

我的问题是如何在从控制器中单击展开箭头时再次触发tg-dynamic-directive。

Answer 1

使用$rootScope.broadcast("XXXXXX");并抓住它

$rootScope.$on("XXXXXX", function() {
    // function call
})

在指令中调用你想要的函数。要么使用document.createElement（＆＃34; tg-dynamic-directive＆＃34;）;

单击时从控制器调用AngularJS指令

1 个答案: