Angular 1.x：无需函数，基于标记设置文本的实现方式

当然可以直接在HTML里实现基于flag切换文本的需求！我给你整理几个实用的原生方案，不用额外写复杂函数就能搞定：

如果你的flag是静态的（或者只需要通过修改DOM属性来切换），可以用自定义data-*属性配合CSS伪元素来实现，完全不需要JavaScript。

举个例子：

<!-- 用data-flag存储状态 -->
<div class="dynamic-text" data-flag="true"></div>

<style>
  /* 根据data-flag的值显示不同文本 */
  .dynamic-text[data-flag="true"]::after {
    content: "这是Flag为true时展示的文本";
  }
  .dynamic-text[data-flag="false"]::after {
    content: "这是Flag为false时展示的文本";
  }
</style>

要是需要动态切换flag，只需要用JS修改元素的data-flag属性值就行（比如document.querySelector('.dynamic-text').dataset.flag = 'false'），CSS会自动更新显示的文本。

如果你的文本内容包含HTML标签或者需要更灵活的渲染，可以用HTML的<template>元素来存储不同状态的内容，再根据flag动态插入。

示例代码：

<!-- 定义不同状态的模板 -->
<template id="flag-true-content">
  <div class="content-block">
    <h3>Flag已开启</h3>
    <p>这是开启状态下的详细内容，支持嵌套HTML标签</p>
  </div>
</template>

<template id="flag-false-content">
  <div class="content-block">
    <h3>Flag已关闭</h3>
    <p>这是关闭状态下的内容</p>
  </div>
</template>

<!-- 用来渲染内容的容器 -->
<div id="content-container"></div>

<script>
  // 假设你的flag变量
  const myFlag = true;
  
  // 获取容器和对应模板
  const container = document.getElementById('content-container');
  const templateId = myFlag ? 'flag-true-content' : 'flag-false-content';
  const template = document.getElementById(templateId);
  
  // 克隆模板内容并插入容器
  container.appendChild(template.content.cloneNode(true));
</script>

这种方式的好处是内容结构清晰，模板可以复用，适合复杂的文本/HTML内容场景。

如果只是简单的文本切换，也可以直接在HTML里用内联JS完成，写法非常简洁：

<script>
  // 定义你的flag
  const flag = false;
</script>

<!-- 直接插入文本 -->
<p>当前状态：<script>document.write(flag ? "Flag开启" : "Flag关闭");</script></p>

不过要注意，document.write只有在页面加载过程中使用才安全，如果页面已经加载完成再调用会覆盖整个页面，所以更推荐用DOM操作的方式：

<p id="status-text"></p>

<script>
  const flag = true;
  document.getElementById('status-text').textContent = flag ? "Flag处于开启状态" : "Flag处于关闭状态";
</script>

总结一下：

• 静态场景或轻量动态切换：优先用方案1（CSS+data属性）
• 复杂HTML内容或需要复用：选方案2（模板+JS）
• 简单文本快速实现：用方案3（内联JS/DOM操作）

这些都是原生HTML/JS的实现方式，不需要依赖任何框架，完全符合你的需求~

内容的提问来源于stack exchange，提问作者Alex