Javascript 如何基于Angular中的表达式从元素中删除属性？

我在我的公文包网站上工作，我在标题上添加了一点视差效果

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

目前它还没有完成，所以我建议只在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，而不必再次复制整个标题吗

---

感谢您提供的所有帮助。

您可以创建一个指令，该指令将删除自身并添加其他指令

这里有一个模板供您使用：

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

---

阅读更多@

据我所知，它可以工作，但您不想复制代码，对吗？您正在为此网站使用后端框架吗？最直接的方法是在后端检测移动设备，并根据不同的HTML提供服务……是的，这是真的。我将引入Node.js作为一个简单的电子邮件表单，所以我可以尝试一下。谢谢你的建议，谢谢！我要试一试。很高兴为您服务；）