通過指令的兩個自定義元素，只有一個在頁面上呈現

我有兩個指令定義了我想在我的頁面上使用的兩個元素。如果我在頁面上使用這兩個指令，只會渲染第一個指令。我敢肯定我打破了一些角度的規則，但不知道是什麼。通過指令的兩個自定義元素，只有一個在頁面上呈現

指令：

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

來源

2016-05-08 Douglas Gaskell

能否請您提供的jsfiddle –

@ adib.mosharrof我能不能在使用的jsfiddle角樣本演示？我似乎無法以非常簡單的方式將它綁定到我的模塊。 'var chatApp = angular.module（「chatApp」，[]）;''

''''''''只是拋出'[$ injector：nomod]模塊'chatApp'不可用！ –

是的，即使我看到..嘗試使用codepen .. 您正在注入'用戶名'到您的指令，但沒有用戶名的服務。 –

如果使用該指令作爲一個屬性，這兩個指令顯示正常。如果你想使用它作爲一個元素，它會工作，如果你將你的指令元素包裝在一個div內。兩種方式都有效。使用它，只要你喜歡

demo

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

，或者你可以做到這一點

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

來源

2016-05-08 07:31:27

啊，他們需要用div封裝，在文檔中有提到這個的地方嗎？ –

通常我使用指令作爲屬性..我沒有找到這個簡單的計劃後通過，所以需要挖掘文檔，看看是否提到這個問題.. –

通過指令的兩個自定義元素，只有一個在頁面上呈現

回答

相關問題