angular-material - $mdSticky duplicates object

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. So I wrote my directive, but the toolbar repeats itself when cloning. Can this be fixed/removed?

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

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

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:

(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));
            });
        }
    }
}

})();

angular-material - $mdSticky duplicates object

Question

1 answers

solution1
0 2016-07-14 01:12:16

angular-material - $mdSticky duplicates object

Question

1 answers

solution1 0 2016-07-14 01:12:16

solution1
0 2016-07-14 01:12:16