Угловой Js Tool Bar вопрос

Question

У меня есть директива панели инструментов с использованием углового материала, я использую transclude в конце директивы, и я хочу, чтобы передаваемый элемент попал в правый конец баннера. Но что я когда-либо делал, это не сработает, это произойдет после элементов директивы?

Код для шаблона, как показано ниже.

<md-toolbar> 
     <div class="md-toolbar-tools"> 

       <h2> 
         <a ui-sref="#">Test - <span ng-bind="header.title"></span></a>  
       </h2> 
      <span flex="5"></span>  
      <div ng-transclude></div> 
     </div> 
    </md-toolbar> 

См. Пример here. Я хочу переместить Test123 в самый правый конец панели инструментов. Пожалуйста, помогите мне

Answer 1

Попробуйте это в качестве banner.html:

<md-toolbar> 
    <div class="md-toolbar-tools"> 

      <h2> 
        <a ui-sref="#">Test - <span ng-bind="header.title"></span></a>  
      </h2> 
     <span flex="5"></span>  
     <div ng-transclude style="position:absolute;right:0;top:16"></div> 
    </div> 
</md-toolbar> 

Не уверен, что если бы это было то, что вы искали, но это делать то, что вы просили.

Answer 2

Вы на правильном пути. В вашем banner.html вам необходимо изменить <span flex="5"> на <span flex>, и это расширит его до right, а не только 5 единиц и нажмите все внутри ng-transclude.

<md-toolbar> 
    <div class="md-toolbar-tools"> 
    <h2> 
     <a ui-sref="#">Test - <span ng-bind="header.title"></span></a>  
    </h2> 
    <span flex></span> 
    <div ng-transclude></div> 
    </div> 
</md-toolbar> 

заметить Также я вымыл файл index.html, так что вы можете легко добавлять содержание в между banner тегами.

<banner header-title="Title 1 Test"> 
    <span>Test 123</span> 
</banner> 

Вы можете увидеть полный solution here

Если вы заинтересованы, вы можете найти более подробную информацию о md-toolbar директивы в official documentation.