ディレクティブ経由の2つのカスタム要素、ペ​​ージ上にレンダリングされるのは1つだけです

Question

ページに使用する2つの要素を定義する2つのディレクティブがあります。ページ上で両方のディレクティブを使用すると、最初のディレクティブのみがレンダリングされます。私は角度のいくつかのルールを壊していると確信していますが、確信していない。

ディレクティブ：

//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>