How do I remove attributes from an element based on an expression in Angular?

Question

I'm working on my portfolio site and I've added a slight parallax effect to my header.

You can see this effect here:

http://claytonkinder.github.io/#/profile

It is VERY unfinished at the moment, so I'd advise only looking at it in Chrome.

This effect lags terribly on mobile devices, so I'm trying to remove all parallax effects from them.

I've got it working by using ng-show to show/hide different headers depending on if my isMobile variable is true or false, but that's a lot of duplicated code and I think it's pretty sloppy.

This is my complete header code:

<header ng-show="!isMobile" parallax-background parallax-ratio="0.2" ng-controller="NavController">
  <div>
    <div parallax parallax-ratio="1.4" parallax-vertical-offset="0" parallax-horizontal-offset="0">
      <h1>Clayton</h1>
    </div>
    <div parallax parallax-ratio="1.15" parallax-vertical-offset="0" parallax-horizontal-offset="0">
      <h1>Kinder</h1>
    </div>
  </div>

  <nav set-class-when-at-top="fixToTop" add-class-when-mobile>
    <div class="navWrapper">
      <div class="navLeft">
        <div>
          <span>Clayton Kinder</span>
        </div>
        <div>
          <a href="https://github.com/ClaytonKinder"><i class="fa fa-github" title="Github"></i></a>
          <a href="tel:843-324-7727"><i class="fa fa-phone" title="Phone"></i></a>
          <a href="mailto:ClaytonAlanKinder@gmail.com"><i class="fa fa-envelope-o" title="Email"></i></a>
        </div>
      </div>
      <div class="navRight">
        <div>
          <a href="#/profile" ng-class="{active: $route.current.activePage == 'profile'}">PROFILE</a>
          <a href="#/projects" ng-class="{active: $route.current.activePage == 'projects'}">PROJECTS</a>
          <a href="#/contact" ng-class="{active: $route.current.activePage == 'contact'}">CONTACT</a>
        </div>
      </div>
    </div>
  </nav>
</header>

The mobile version is exactly the same except for lacking all of the parallax-related attributes, meaning that this:

<header ng-show="!isMobile" parallax-background parallax-ratio="0.2" ng-controller="NavController">

becomes this:

<header ng-show="!isMobile">

My question is: what's the best way to get the finished header I'm looking for? Can I add/remove attributes based on an expression? Can I just do ng-show/ng-if on the beginning header tag and two divs that have parallax effects instead of having to copy over the entire header again?

Thank you for any and all help.

As I understand, its working but you don't want to duplicate code -- is that correct? Are you using a back-end framework for this site? It would be most straightforward to detect mobile on the back-end and serve different HTML depending... — eirikir, Aug 11 '15 at 17:21
Yes, that's true. I'm going to bring in Node.js for a simple email form, so I might try it with that. Thanks for the advice. — ClaytonAlanKinder, Aug 12 '15 at 21:01

score 1 · Answer 1 · edited May 23 '17 at 12:08

You can create a directive which will remove itself and add other directives.

Here's a template for you:

angular
  .module('app')
  .directive("showWhen", showWhen);

function showWhen($compile, $timeout) {
  var directive = {
    restrict: 'A',
    priority: 1000,
    terminal: true,
    link: showWhenPostLink
  };

  function showWhenPostLink(scope, element, attrs) {
    var listener = scope.$watch(attrs.showWhen, function(condition) {
      if (condition) {
        element.removeAttr("show-when"); // to stop infinite loops after $compile
        // add directives here, ng-disabled is just an example
        element.attr("ng-disabled", "true");
        $compile(element)(scope); // $compile all the newly added angular directives
        $timeout(function() {
          listener(); // unregister the $watch
        });
      }
    })
  }

  return directive;
}

http://plnkr.co/edit/vnNIRLeW5SvtlVO22SWh?p=preview

Read more @ Add directives from directive in AngularJS

Thank you! I'm gonna give this a shot. – ClaytonAlanKinder Aug 12 '15 at 21:01 — ClaytonAlanKinder, Aug 12 '15 at 21:01

score 0 · Answer 2 · answered Mar 16 '23 at 12:38

Veja se ajuda:

(function () {
    'use strict';

    angular
        .module('app.common')
        .directive('multiSelectChecker', multiSelectChecker);

    multiSelectChecker.$inject = ['$compile'];

    function multiSelectChecker($compile) {

        return {
            restrict: 'A',
            replace: false,
            terminal: true, //terminal means: compile this directive only
            priority: 50000, //priority means: the higher the priority, the "firster" the directive will be compiled
            link: function (scope, element, attrs) {

                scope.$watch(attrs.multiSelectChecker, function (condition) {

                    element.removeAttr("multi-select-checker");

                    if (condition) {
                        element.attr("multiple", "true");
                    }

                    $compile(element)(scope);
                });
            }
        }
    }
})();

Para html;

<div class="form-group">
    <ui-select multi-select-checker="item.ativarMultiSelecaoPesquisa"
               ng-model="item.filtro.value1" class="full-width"
               sortable="{{item.ativarMultiSelecaoPesquisa}}"
               reset-search-input="{{item.ativarMultiSelecaoPesquisa}}"
               ng-change="vm.onChangeListaEncadeada(item, $select.selected, true)">
        <ui-select-match allow-clear placeholder="escolha um item...">
            {{item.ativarMultiSelecaoPesquisa ? $item : $select.selected}}
        </ui-select-match>
        <ui-select-choices repeat="itemLista in item.valoresLista | filter: $select.search">
            <div ng-bind-html="itemLista | highlight: $select.search"></div>
        </ui-select-choices>
    </ui-select>
</div>

How do I remove attributes from an element based on an expression in Angular?

2 Answers2