Javascript 两个自定义元素通过指令，页面上只呈现一个

我有两个指令定义了我想在页面上使用的两个元素。如果在页面上同时使用这两个指令，则只呈现第一个指令。我肯定我打破了一些规则的角度，但不知道是什么

指令：

  //The template and handler for the set username button
  chatApp.directive('setUsernameButton', ['username', function(username){
    function link(scope, element, attrs){
      element.bind('click', function(){
        username.setUsername();
        scope.$parent.$apply();
      });
    };
    var template = '<div ng-disabled="username.invalidUsername" ng-class="{disabled: username.invalidUsername}" id="setNameButton" class="ui teal button">Set Name</div>'
    return {
      restrict: 'E',
      replace: true,
      template: template,
      link: link,
      scope: false
    };
  }]);

  //The template and handler for username input field
  chatApp.directive('usernameInputField', ['username', function(username){
    function link(scope, element, attrs){
      element.bind('keydown', function(e){
        if(e.keyCode == 13){
          username.setUsername();
          scope.$parent.$apply();
        }
      });
    };
    var template = '\
      <div class="ui input">\
        <input ng-model="username.name" type="text" placeholder="Username...">\
      </div>'
    return {
      restrict: 'E',
      replace: true,
      template: template,
      link: link,
      scope: false
    };
  }]);

//设置用户名按钮的模板和处理程序
指令（'setUsernameButton'，['username'，函数（username）{
功能链接（范围、元素、属性）{
元素绑定（'单击'，函数（）{
username.setUsername（）；
作用域。$parent。$apply（）；
});
};
变量模板='Set Name'
返回{
限制：'E'，
替换：正确，
模板：模板，
链接：链接，
范围：假
};
}]);
//用户名输入字段的模板和处理程序
指令（'usernameInputField'，['username'，函数（username）{
功能链接（范围、元素、属性）{
元素绑定（'keydown'，函数（e）{
如果（e.keyCode==13）{
username.setUsername（）；
作用域。$parent。$apply（）；
}
});
};
var模板\
\
\
'
返回{
限制：'E'，
替换：正确，
模板：模板，
链接：链接，
范围：假
};
}]);

HTML代码段：

<div ng-if="!username.nameSet" class="ten wide column">
  <set-username-button />                        
  <username-input-field />                       
</div>

---

如果将指令用作属性，则两个指令都会正确显示。如果您想将它用作一个元素，那么如果您将指令元素包装在一个div中，它就会起作用。两种方法都可以。随便你怎么用

或者你可以这样做

  <div>
      <set-username-button />
  </div>
  <div>
    <username-input-field /> 
  </div>

---

如果将指令用作属性，则两个指令都会正确显示。如果您想将它用作一个元素，那么如果您将指令元素包装在一个div中，它就会起作用。两种方法都可以。随便你怎么用

或者你可以这样做

  <div>
      <set-username-button />
  </div>
  <div>
    <username-input-field /> 
  </div>

能否请您提供一个示例演示jsfiddle@adib.mosharrof我不能在JSFIDLE中使用angular吗？我似乎无法用一种非常简单的方式将它绑定到我的模块<代码>var chatApp=angular.module（“chatApp”，[]）

刚刚抛出的

[$injector:nomod]模块“chatApp”不可用错误。是的，我也看到了。。尝试使用代码笔。。您正在将“username”注入指令中，但没有使用username的服务。此处未列出该服务。它是存在的，并且按预期运行，如果我使用div和以其相应指令命名的属性，则不再出现此问题。似乎只有在尝试使用自定义元素类型时才会发生这种情况。如果我在HTML中切换它们的顺序，只显示第一个。您能提供一个示例演示吗jsfiddle@adib.mosharrof我不能在JSFIDLE中使用angular吗？我似乎无法用一种非常简单的方式将它绑定到我的模块<代码>var chatApp=angular.module（“chatApp”，[]）
刚刚抛出的
[$injector:nomod]模块“chatApp”不可用错误。是的，我也看到了。。尝试使用代码笔。。您正在将“username”注入指令中，但没有使用username的服务。此处未列出该服务。它是存在的，并且按预期运行，如果我使用div和以其相应指令命名的属性，则不再出现此问题。似乎只有在尝试使用自定义元素类型时才会发生这种情况。如果我在HTML中切换它们的顺序，只会显示第一个。啊，它们需要用div包装，文档中有没有提到这一点？通常我使用指令作为属性。。我在简单地策划之后没有发现这一点，所以需要深入研究文档，看看是否提到了这个问题..啊，它们需要用div包装，文档中有没有提到这一点？通常我使用指令作为属性。。我在简单策划之后没有发现这个问题，所以需要翻阅文档，看看是否提到了这个问题。。