angularjs 条件指令仅在桌面上 [英] angularjs conditional directive only on desktop

问题描述

我只想在元素上放置一个指令，如果它不是从移动设备上查看的.由于它是一个外部维护的插件，我不想修改指令本身.这样做的最简单方法是什么?

I want to put a directive on an element only if it's not viewed from mobile. As it's an externally maintained plugin I don't want to modify the directive itself. What's the easiest way of doing this?

推荐答案

创建一个指令来执行检测(或接收它)，如果不是从移动设备上查看，则添加该指令，从元素中移除自身，然后编译该元素.

Create a directive that performs the detection (or receives it), adds the directive if not viewed from mobile, removes itself from the element and then compiles the element.

HTML:

<div not-on-mobile="external-directive">Hello.</div>

JS:

app.directive('notOnMobile', function($compile) {

  // Perform detection.
  // This code will only run once for the entire application (if directive is present at least once).
  // Can be moved into the compile function if detection result needs to be passed as attribute.
  var onMobile = false;

  return {
    compile: function compile(tElement, tAttrs) {

      if (!onMobile) tElement.attr(tAttrs.notOnMobile, '');

      tElement.removeAttr('not-on-mobile');

      return function postLink(scope, element) {

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

演示: http://plnkr.co/edit/nJntmfiLZ20JCdSWiRDQ?p=预览

这篇关于angularjs 条件指令仅在桌面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！