Question

我有这个html模板：

<div width-watcher>
    <div parallax-bg parallax-active="!(tablet || mobile)">
        ...
    </div>
</div>

width-watcher公开了3个布尔值：移动设备，平板电脑和屏幕。这里没有指令选项。我想评估表达式"!(tablet || mobile)"以将其传递给我的第二个指令parallax-bg，以禁用移动设备上的视差。

我尝试了以下内容（parallax-bg）：

使用scope.$eval(attr.parallaxActive)返回"undefined"
直接使用scope.parallaxActive：
- "&" =＆gt;返回一个函数，执行时返回"undefined"
- "=" =＆gt;返回"undefined"
- "@" =＆gt;返回"!(tablet || mobile)"

我没有想法。由于英语不是我的母语，我可能在Google上错过了一些解决方案。

这是我的background-parallax指令的代码：

.directive('parallaxBackground', function($window) {
return {
    transclude: true,
    template: '<div ng-transclude></div>',
    scope: {
        parallaxRatio: '@',
        parallaxOffset: '@',
    },
    link: function(scope, elem, attrs) {
        var scopeActive = scope.$eval(attrs.parallaxActive);
        var ...
        if(scopeActive){
            ...
        }
    }
};

Answer 1

您的第一种方法scope.$eval(attr.parallaxActive)是正确的，但如果将属性值绑定到指令的范围，则无法工作。

工作示例：JSFiddle

angular.module('myApp').directive(function() {
  return {
    link: postLink,
    template: '<ng-transclude></ng-transclude>',
    transclude: true
  };

  function postLink(scope, iElement, iAttrs) {
    alert(scope.$eval(iAttrs.parallaxActive));
  };
}

那就是说，我的建议是使用工厂策略将widthWatcher指令转换为服务。这样，您可以将其注入任何控制器，指令，过滤器或其他服务，并确定屏幕类型，而不依赖于范围。

工作示例：JSFiddle

angular.module('myApp', [])
  .factory('$widthWatcher', widthWatcherFactory)
  .directive('parallaxBg', parallaxBgDirective)
;

function widthWatcherFactory() {
  return {
    isMobile: isMobile,
    isScreen: isScreen,
    isTablet: isTablet
  };

  function getWidth() {
    return window.innerWidth || document.body.clientWidth;
  }

  function isMobile() {
    return getWidth() < 600;
  }

  function isScreen() {
    return getWidth() > 960;
  }

  function isTablet() {
    return !isMobile() && !isScreen();
  }
}

function parallaxBgDirective($widthWatcher) {
  return {
    link: postLink,
    template: '<ng-transclude></ng-transclude>',
    transclude: true
  };

  function postLink(scope, iElement, iAttrs) {
    alert($widthWatcher.isScreen());
  };
}

<强>更新

为了解决在调用parallaxBg链接函数时未定义值的注释，我更新了JSFiddle以显示调用链接函数的顺序。

为了了解正在发生的事情，您需要了解how directives are compiled。

Eval指令的参数angular

1 个答案: