Question

我正在我的投资组合网站上工作，我为我的标题添加了一个轻微的视差效果。

您可以在此处看到此效果：

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

目前还没有完成，所以我建议只在Chrome中查看。

此效果在移动设备上非常滞后，所以我试图从它们中删除所有视差效果。

我已经通过使用ng-show来显示/隐藏不同的标头，这取决于我的isMobile变量是真还是假，但这是很多重复的代码，我认为它非常草率。

这是我的完整标题代码：

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

移动版本完全相同，只是缺少所有与视差相关的属性，这意味着：

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

成为这个：

<header ng-show="!isMobile">

我的问题是：获得完成标题的最佳方法是什么？我可以根据表达式添加/删除属性吗？我可以在开始标题标签和两个具有视差效果的div上执行ng-show / ng-if，而不必再次复制整个标题吗？

感谢您的帮助。

Answer 1

您可以创建一个删除自身并添加其他指令的指令。

以下是您的模板：

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

了解更多@ Add directives from directive in AngularJS

如何根据Angular中的表达式从元素中删除属性？

1 个答案: