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

Question

快速提问，所以我使用 tg-dynamic-directive 循环遍历 json 文件并输出以下树。（见附图）

所以问题是，当 "tree" 变得很长时，会出现一些严重的性能问题，因为浏览器需要呈现很多项目。（我说的是 1000 或更长）。所以我想要做的是最初只加载前 2 个级别，其余的将被折叠。当用户单击每个元素的展开箭头时，我需要渲染它的子元素。（如果这有意义的话）。所以基本上运行 tg-dynamic-directive 又一次。

当页面开始呈现并触发带有 html 的 returns 模板时，我用它来检查它的前 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("tg-dynamic-directive");

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

Call AngularJS directive from controller on click

javascript

json

angularjs

angularjs-directive

angular-directive