Angular Js工具栏问题

Angular Js Tool Bar issue

本文关键字：问题 工具栏 Js Angular      更新时间：2023-09-26

我有一个工具栏指令使用角材料，我在指令的末尾使用透光，我希望透光元素来在横幅的右端。但是不管我怎么做，它都不会起作用，它是在指令的元素之后出现的?

模板的代码如下:

<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移动到工具栏的最右边。

试试这个作为你的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>

不确定这是不是你想要的，但它确实做了你要求的。

你做对了。在你的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指令的更多信息。

相关文章：