如何在AngularJS中创建可继承父元素实现空变量默认文本显示？

自定义指令实现方案 #

你可以创建一个defaultText指令，自动读取元素内的原始文本作为默认值，当绑定的变量为空/未定义时显示默认内容，变量有值时则显示变量数据。

1. 定义指令

angular.module('你的应用模块名').directive('defaultText', function() {
  return {
    restrict: 'A',
    scope: {
      bindValue: '=defaultText' // 绑定要显示的变量
    },
    link: function(scope, element) {
      // 保存元素初始文本作为默认值
      const defaultContent = element.html().trim();

      // 监听变量变化，更新显示内容
      scope.$watch('bindValue', function(newVal) {
        if (newVal == null || newVal === '') {
          element.html(defaultContent);
        } else {
          element.html(newVal);
        }
      });

      // 初始化时立即执行一次，确保默认值正确显示
      scope.$watch('bindValue')();
    }
  };
});

2. 在模板中使用指令

替换原来的ng-bind，直接在元素上添加default-text属性并绑定变量，元素内的文本就是默认内容：

<h3 default-text="name">Student's name</h3>
<p default-text="description">More about the programme</p>
<h2 default-text="title">Details about the programme for the whole years</h2>

指令工作逻辑 #

• 指令初始化时会把元素内的原始文本存入变量，作为空值时的默认显示内容
• 监听绑定变量的变化：
  • 当变量为null、undefined或空字符串时，渲染默认文本
  • 变量有有效内容时，渲染变量值
• 初始加载时自动执行一次监听逻辑，避免页面加载时出现空白

兼容表单控件（可选） #

如果需要给带ngModel的表单元素（如input、textarea）实现类似功能，可以修改指令同时支持块级元素和表单控件：

angular.module('你的应用模块名').directive('defaultText', function() {
  return {
    restrict: 'A',
    scope: {
      bindValue: '=?defaultText',
      ngModel: '='
    },
    link: function(scope, element) {
      let defaultContent;

      if (element.is('input, textarea')) {
        // 表单控件读取placeholder作为默认值
        defaultContent = element.attr('placeholder') || '';
        scope.$watch('ngModel', function(newVal) {
          element.val(newVal == null || newVal === '' ? defaultContent : newVal);
        });
        scope.$watch('ngModel')();
      } else {
        // 块级元素读取内部文本作为默认值
        defaultContent = element.html().trim();
        scope.$watch('bindValue', function(newVal) {
          element.html(newVal == null || newVal === '' ? defaultContent : newVal);
        });
        scope.$watch('bindValue')();
      }
    }
  };
});

表单控件使用示例：

<input type="text" ng-model="username" default-text placeholder="Enter your username">

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