角材料-$ mdSticky复制对象

Question

I'm starting to work with Angular Material and I want to make a sticky toolbar, so I went to the documentation and read about $mdSticky. 我开始使用Angular Material，并且我想制作一个粘性的工具栏，所以我去了文档并阅读了有关$ mdSticky的内容。 So I wrote my directive, but the toolbar repeats itself when cloning. 所以我写了指令，但是工具栏在克隆时会重复。 Can this be fixed/removed? 可以固定/删除吗？

index.html index.html

<body ng-cloak>


  <md-content layout-fill>
    <div layout="column">
      <md-toolbar class="md-medium-tall md-accent" layout-align="center" md-toolbar-shrink nio-sticky>
        <div class="md-toolbar-tools" layout="row">
          <span flex>
        <button class="md-button md-icon-button" hide-gt-sm md-ink-ripple>
          <md-icon md-svg-icon="assets/icons/menu-button.svg">
          </md-icon>
        </button>
      </span>
          <div flex layout="row" layout-align="end" layout-align-gt-sm="center">
            <img src="assets/img/naumovski-logo.svg" layout-align="center" />
          </div>
          <span flex show-gt-sm hide-xs hide-sm>
      </span>
        </div>
      </md-toolbar>
      <md-nav-bar hide-xs hide-sm md-selected-nav-item="'home'" nav-bar-aria-label="navigation links">
        <div flex layout="row" layout-align="center">
          <md-nav-item md-nav-click="goto('home')" name="home">Page One</md-nav-item>
          <md-nav-item md-nav-click="goto('page2')" name="page2">Page Two</md-nav-item>
          <md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
          <md-nav-item md-nav-click="goto('page4')" name="page4">Page Four</md-nav-item>
        </div>
      </md-nav-bar>
    </div>
    <md-content>
      //content here
      <br />
    </md-content>
  </md-content>

sticky.js sticky.js

(function () {
    'use strict';

    angular
        .module('naumovskiIo')
        .directive('nioSticky', sticky);

    sticky.$inject = ['$mdSticky', '$compile'];

    function sticky($mdSticky, $compile) {
        return {
            restrict: 'A',
            replace: true,
            link: function(scope, element) {
                $mdSticky(scope, element);
            }
        }
    }
})();

I also tried creating a separate template just for the toolbar, ie not a general directive and then compiling it, however it was still a failure. 我也尝试为工具栏创建一个单独的模板，即不是一个通用指令，然后对其进行编译，但是这仍然是一个失败。 Any help? 有什么帮助吗？

Answer 1

Did you try to use the $mdSticky service according to the documentation? 您是否尝试根据文档使用$ mdSticky服务？

So, you should use your directive as an element rather than as an attribute: 因此，您应该将指令用作元素而不是属性：

<nio-sticky></nio-sticky>

And in the definition of the directive, you'll define the template as follows (according to your example, this is what it should look): 并且在指令的定义中，您将按照以下方式定义模板（根据您的示例，这就是它的外观）：

<md-toolbar class="md-medium-tall md-accent" layout-align="center" md-toolbar-shrink>
  <div class="md-toolbar-tools" layout="row">
    <span flex>
      <button class="md-button md-icon-button" hide-gt-sm md-ink-ripple>
        <md-icon md-svg-icon="assets/icons/menu-button.svg">
        </md-icon>
      </button>
    </span>
    <div flex layout="row" layout-align="end" layout-align-gt-sm="center">
      <img src="assets/img/naumovski-logo.svg" layout-align="center" />
    </div>
    <span flex show-gt-sm hide-xs hide-sm>
    </span>
  </div>
</md-toolbar>

UPDATE: 更新：

Of course, this template can be put into an .html file, ie sticky-toolbar.directive.html and you can then reference it into the directive's definition like this: 当然，可以将该模板放入.html文件，即sticky-toolbar.directive.html ，然后可以将其引用到指令的定义中，如下所示：

(function () {
'use strict';

angular
    .module('naumovskiIo')
    .directive('nioSticky', sticky);

sticky.$inject = ['$mdSticky', '$compile', '$templateRequest'];

function sticky($mdSticky, $compile, $templateRequest) {
    return {
        restrict: 'E',
        replace: true,
        link: function(scope, element) {
            $templateRequest('sticky-toolbar.directive.html').then(function(html){
                var template = angular.element(html);
                element.append($compile(template)(scope));
                $mdSticky(scope, element, $compile(template)(scope));
            });
        }
    }
}

})(); }）（）;

角材料-$ mdSticky复制对象

问题描述

1 个解决方案

解决方案1
0 2016-07-14 01:12:16

角材料-$ mdSticky复制对象

问题描述

1 个解决方案

解决方案1 0 2016-07-14 01:12:16

解决方案1
0 2016-07-14 01:12:16