Angular's eval directive's parameters

Question

Angular's eval directive's parameters

Looking for a solution to manage parallax on mobile devices in my HTML template:

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

The width-watcher includes boolean values for mobile, tablet, and screen. I need to evaluate the expression "!(tablet || mobile)" to pass it to the parallax-bg directive, disabling parallax on mobile devices.

I've attempted various methods in the parallax-bg:

Using scope.$eval(attr.parallaxActive) results in "undefined"
Accessing scope.parallaxActive directly with:
- "&" yields a function that returns "undefined"
- "=" also returns "undefined"
- "@" provides "!(tablet || mobile)"

After exhausting my options, I'm seeking additional solutions as English is not my first language, potentially missing some answers on Google.

Below is the code snippet for my background-parallax directive:

.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){
            ...
        }
    }
};

javascript angularjs angularjs-directive directive

Answer 1

Answer №1

Initially, you used the method scope.$eval(attr.parallaxActive), which is accurate, but it may not function properly if the attribute value is bound to your directive's scope.

For a working example, check out this 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));
  };
}

Instead, I suggest converting your widthWatcher directive into a service using the factory strategy. This way, you can inject it into any controller, directive, filter, or other services and determine the screen type without depending on scope.

Here's a working example on 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());
  };
}

UPDATE

In response to the comment about values being undefined when the parallaxBg link function is called, I have made updates to the JSFiddle to demonstrate the order in which link functions are executed.

To comprehend what is happening, it is essential to understand how directives are compiled.

Answer 2

Initially, you used the method scope.$eval(attr.parallaxActive), which is accurate, but it may not function properly if the attribute value is bound to your directive's scope.

For a working example, check out this 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));
  };
}

Instead, I suggest converting your widthWatcher directive into a service using the factory strategy. This way, you can inject it into any controller, directive, filter, or other services and determine the screen type without depending on scope.

Here's a working example on 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());
  };
}

UPDATE

In response to the comment about values being undefined when the parallaxBg link function is called, I have made updates to the JSFiddle to demonstrate the order in which link functions are executed.

To comprehend what is happening, it is essential to understand how directives are compiled.

Angular's eval directive's parameters

Answer №1

Similar questions

Is it possible to incorporate RequireJS in importing VueJS components?

Missing table header in HTML causing table to not display correctly

Using jQuery to arrange information from an API into a table

Algorithm using JavaScript to identify objects within an array

Implementing $timeout within ng-init to execute a function that showcases various shapes at 2-second intervals

How can Vuetify components be imported separately in the right way?

Having trouble with [Object Object] errors in your hybrid app using Javascript?

Having trouble getting ng-include to work while running my Angular app locally

Enhancing live query functionality and providing a substitute for DOMNodeInserted specifically tailored for

adjusting array based on screen size fluctuations

Sending information to a singular Vue component file

The WkWebView Message handler fails to return the value of the textbox initially, but successfully does so after pressing the button a second time

How can I make a page scroll to the center when clicking on a carousel?

Merging a VUE project and a .NET framework project to unleash their full potential

Monitoring vuex mutations and actions within a component: A step-by-step guide

When transitioning to the production environment, Nuxt.js fails to load images

Having trouble getting tagmanager.js to work on my JSF 2.2 form. Can anyone help me troubleshoot what is going wrong?

My Angular project is experiencing issues with Socket.IO functionality

Leverage the power of Vuex within your Nuxt application

Using Ajax script to transfer user information to a php file in order to refresh the modified row in a table