ServiceNow Angular.js 门户小部件和更改嵌入式小部件的 HTML 模板

Question

我正在使用 ServiceNow angular.js 门户小部件，为了避免克隆小部件，我制作了自己的小部件并将其小部件嵌入到我的小部件中。然后我做了各种事情来操作嵌入的小部件数据。

包括更改嵌入小部件的 HTMl 模板。 然而，它似乎将其存储在缓存中，因为如果我导航到另一个页面，其中使用与我嵌入第一个页面相同的小部件，则会呈现更改的 HTML 模板。如果我刷新它又恢复正常了。

这里可能发生了什么？

我的服务器脚本很简单：

data.widget = $sp.getWidget('relevant_for_you', options);

客户端脚本是这样的：

let widgetsData = c.data.widget.data.widgetsData;

widgetsData.forEach(item => {
    
    // Proceed with cloning and modifying the template
    let thisWidgetTemplate = item.data.widgetData.template.slice(0);

    // Create a temp jQuery object from the HTML string
    let $tempDiv = $('<div>').html(thisWidgetTemplate);

    // Find the element with the class card-image-container
    let $contentContainer = $tempDiv.find('.content-card-container');

    if ($contentContainer.length > 0) {
        // Create a temporary element
        let $newElement = $('<div>', {
            class: 'arrow-container',
            text: item.data.widgetData.orderMessage
        });

        // Append the new element to the content container
        $contentContainer.append($newElement);

        // Update the template with the modified HTML
        thisWidgetTemplate = $tempDiv.html();

        // Ensure the template is only injected into the intended widget
        item.data.widgetData.template = thisWidgetTemplate;
    } 

});

奇怪的是，如果我在另一个页面上的另一个小部件中 console.log HTML 模板，则 arrow-container 元素不是模板的一部分。所以它几乎就像是专门存在于缓存或其他东西中一样。

我的小部件的 HTML 模板非常简单明了

 <div class="{{c.options.sp_column}}">
    <div ng-class="{'negative-margin': options.negative_top_margin === 'true' && c.location.indexOf('$spd.do') === -1}">
      <sp-widget widget="data.widget"></sp-widget>
    </div>
 </div>

Answer 1

好吧，这就是可能发生的事情：

发生了什么事

那么，您正在调整嵌入式小部件的 HTML 模板，对吗？问题是，AngularJS 对您的更改和缓存它们变得有点太舒服了。因此，当您跳到具有相同小部件的另一个页面时，就像，“哦嘿，我记得这个！”并提供您的修改版本而不是原始版本。但是，当你刷新页面时，Angular 会说，“哎呀，我最好拿一份新的副本！”一切都会恢复正常。

如何解决

1. 在模板调整上放松一下：我知道直接深入研究并弄乱 HTML 很诱人，但这有点像用缓存玩 Jenga - 它可能会很快变得不稳定。相反，尝试使用 AngularJS 指令或一些偷偷摸摸的 CSS 技巧来获得你想要的东西，而不需要接触 HTML。这样，您的缓存就不会像嫉妒的前任那样保留这些更改。

2. 给缓存一个推动：如果你执意要改变模板，你可能需要欺骗 Angular 每次都认为它是一个全新的文件。一种简单的方法是在模板 URL 上添加唯一的时间戳：

   let uniqueTemplateUrl = 'template.html?v=' + new Date().getTime();
   // Boom, new template every time!
   

3. 像专业人士一样跟踪您的小部件：如果您使用

   ng-repeat

   循环浏览您的小部件，请帮自己一个忙，并使用带有唯一 ID 的

   track by

   。这将有助于 Angular 保持其小部件的整齐并避免混淆：

   <div ng-repeat="item in widgetsData track by item.id">
   

4. 像 1999 年一样克隆它：如果您的更改变得有点疯狂，那么克隆整个小部件可能会更容易，而不是嵌入它并摆弄它。这样，您就可以完全控制，而不必担心奇怪的缓存问题。

底线

您正在处理 AngularJS 缓存恶作剧的经典案例。最好的举动？尽量避免直接弄乱模板。但如果您无法抗拒，请使用我提到的缓存破坏技巧。如果事情变得太疯狂，请考虑克隆该小部件，就像它是您当年最喜欢的混音带一样。

希望事情能澄清！如果你遇到更多奇怪的事情，你知道在哪里可以找到我。