MEAN.JS：Angular指令实现下拉选择时切换内容

看起来你已经搭好了基础框架，但当前的ascendancy指令还没实现监听select变化和更新<ascend>元素的核心逻辑。咱们一步步来修正这个问题：

问题分析 #

你的指令目前只是给绑定的select元素设置了固定文本，缺少三个关键环节：

• 监听select选中项的变化
• 关联到页面上的<ascend>目标元素
• 根据选中值动态生成对应的HTML内容

解决方案 #

我们可以修改ascendancy指令，让它监听select的ng-model值变化，找到对应的<ascend>元素并更新其内容。这里用$watch监听值变化，同时用$compile处理HTML（如果需要动态绑定Angular表达式的话）：

修改后的指令代码 #

(function () { 
  'use strict'; 

  angular
    .module('builds')
    .directive('ascendancy', ascendancy);

  ascendancy.$inject = ['$compile']; 

  function ascendancy($compile) { 
    return {
      restrict: 'A',
      scope: {
        // 绑定select的ng-model值到指令作用域
        selectedClass: '=ngModel'
      },
      link: function postLink(scope, element, attrs) {
        // 定位页面中的<ascend>元素（可根据实际DOM结构调整查找方式）
        const ascendElement = element.parent().next('ascend');
        
        // 定义不同职业对应的HTML内容
        const classContentMap = {
          marauder: '<div><h3>Marauder Ascendancies</h3><ul><li>Juggernaut</li><li>Berserker</li><li>Chieftain</li></ul></div>',
          ranger: '<div><h3>Ranger Ascendancies</h3><ul><li>Deadeye</li><li>Raider</li><li>Pathfinder</li></ul></div>',
          shadow: '<div><h3>Shadow Ascendancies</h3><ul><li>Assassin</li><li>Trickster</li><li>Saboteur</li></ul></div>',
          witch: '<div><h3>Witch Ascendancies</h3><ul><li>Necromancer</li><li>Occultist</li><li>Elementalist</li></ul></div>',
          templar: '<div><h3>Templar Ascendancies</h3><ul><li>Inquisitor</li><li>Hierophant</li><li>Guardian</li></ul></div>',
          duelist: '<div><h3>Duelist Ascendancies</h3><ul><li>Slayer</li><li>Gladiator</li><li>Champion</li></ul></div>',
          scion: '<div><h3>Scion Ascendancy</h3><p>Path of Exile\'s universal class, with access to all ascendancy nodes</p></div>'
        };

        // 监听选中值的变化
        scope.$watch('selectedClass', function(newVal) {
          if (newVal && classContentMap[newVal]) {
            // 清空原有内容
            ascendElement.empty();
            // 编译HTML（若内容含Angular指令则必须编译，静态HTML可直接用html()）
            const compiledContent = $compile(classContentMap[newVal])(scope);
            ascendElement.append(compiledContent);
          } else {
            // 未选中时的默认提示
            ascendElement.html('Please select a starting class');
          }
        });
      }
    };
  } 
})();

HTML部分调整 #

你的HTML基本无需大改，只需确保<ascend>元素的位置能被指令正确找到（这里用parent().next()定位，若DOM结构变动可调整查找逻辑）：

<div class="form-group" show-errors> 
  <label class="control-label" for="fields[class]">Starting Class</label> 
  <select name="fields[class]" data-ng-model="vm.class.selectedClass" id="class" class="form-control" ascendancy required> 
    <option value="marauder">Marauder</option> 
    <option value="ranger">Ranger</option> 
    <option value="shadow">Shadow</option> 
    <option value="witch">Witch</option> 
    <option value="templar">Templar</option> 
    <option value="duelist">Duelist</option> 
    <option value="scion">Scion</option> 
  </select> 
  <div ng-messages="vm.form.buildForm.class.$error" role="alert"> 
    <p class="help-block error-text" ng-message="required">Class is required.</p> 
  </div> 
</div> 
<ascend>Please select a starting class</ascend>

关键说明 #

1. 作用域绑定：通过scope: { selectedClass: '=ngModel' }把select的ng-model值同步到指令作用域，方便监听变化。
2. 元素定位：如果<ascend>的位置不确定，建议给它加个唯一id（比如<ascend id="ascend-content">），然后用document.getElementById('ascend-content')查找更可靠。
3. HTML编译：如果动态内容包含Angular指令（如ng-click、ng-repeat），必须用$compile处理后再插入，否则指令不会生效；若只是静态HTML，直接用ascendElement.html(classContentMap[newVal])即可。
4. 默认状态：未选中任何选项时显示提示文本，提升用户体验。

这样修改后，当你选择不同职业时，<ascend>标签里就会自动显示对应的专属HTML内容了。

内容的提问来源于stack exchange，提问作者I. Shm