Проблема угловой панели инструментов Js

Question

Проблема угловой панели инструментов Js

0

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

Код для шаблона выглядит следующим образом.

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

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

robin 20 авг. 2015, в 14:45

Источник

0

где ты смог это исправить?
Gary Torres 27 авг. 2015, в 20:32

Теги:

javascript

angularjs

css

html5

2 ответа

0

Вы на правильном пути. В вашем 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>

Вы можете увидеть полное решение здесь

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

Gary Torres 20 авг. 2015, в 12:21

Ещё вопросы

BobDoleForPresident · Accepted Answer · 2015-08-20T11-16-00.000Z

Попробуйте это как ваш 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>

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

Привет, он перемещает Test123 в правый конец, но в моем случае мне просто нужно переместить только одну часть включения, но ваш пример перемещает его полностью.