javascript - 通过指令的两个自定义元素，页面上仅呈现一个

Question

我有两个指令定义了我想在页面上使用的两个元素。如果我在页面上使用这两个指令，则仅呈现第一个指令。我确信我违反了一些 Angular 规则，但不确定是什么。

指令:

  //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
    };
  }]);

HTML 片段:

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

Answer 1

如果您使用该指令作为属性，则这两个指令都会正确显示。如果您想将其用作元素，则将指令元素包装在 div 内即可。两种方法都有效。随心所欲地使用它

demo

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

或者你可以这样做

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