角度指令:如何控制图表的呈现时间

Angular Directives: How to control when chart is rendered

本文关键字：时间 控制 指令 何控制      更新时间：2023-09-26

我正在尝试设置一个管理页面。有一堆元素，当您单击其中一个元素时，会出现一个包含更多信息的下拉列表，特别是高图表。目前我正在使用指令来创建图表div，但是我无法找到一种方法来控制何时呈现该指令，它会在页面加载时自动发生。

不幸的是，我有超过 200 个

这样的元素，并且使用页面的当前设置，每次页面加载时都会呈现所有 200 个图表。显然，这会导致糟糕的用户体验。

总的来说，我对网络开发有点陌生。我不确定我是否以正确的方式处理了这个问题。以下是相关代码：

<div class="source" ng-repeat="source in sources">
    ...
    <div source-dropdown-graph class="sources-dropdown-graph" ng-show="showDropdownGraph == source.myIndex" source="source"></div>
</div>

我正在使用 ng-show 在用户单击时切换图形的可见性。从指令：

return {
    scope: {
        source: "=source"
    },
    templateUrl: 'source-dropdown-graph.html',
    link: link
};

链接函数只是呈现图形。最后是模板的 html：

<div id="chart-container" style="min-width: 70%; max-width: 1200px; height: 300px; margin: 0 auto"></div>

就像我说的，这一切都有效，除了立即渲染所有内容。我想在source对象中设置一个标志，以确定是否呈现图表，但我不知道如何在该值更改时重新呈现它。在这种情况下，指令是正确的使用吗？就像我说的，我对 Web 开发仍然相对较新，所以我愿意以完全不同的方式做这件事。谢谢！

除了使用 ng-if 而不是 ng-show 来限制 DOM 中的元素数量之外，还可以在指令中使用监视来监视source的更改并控制何时呈现或不呈现。

return {
    scope: {
        source: "="
    },
    templateUrl: 'source-dropdown-graph.html',
    link: link
};
function link (scope, element, attrs) {
    scope.$watch('source', function (newValue, oldValue) {
        // condition(s) where you don't want to render
        // i.e. if the source is undefined or null
        if (!newValue || (newValue === oldValue)) {
            return;
        }
        // otherwise, render it every time source changes
        render();
    });
    function render () {
        // your rendering logic
    }
}
相关文章：