Javascript – Angularjs – get body element inside directive

angularjsjavascript

How to get body element in angular directive? my objective is to do what one do with jquery $('body').innerWidth(); inside directive. I do not want to use jquery but angular built-in jqlite implementation.

Best Answer

If you need to access the body element from within a directive that is applied on another element, you can make use of the $document service like so..

app.directive("myDirective", function($document) {
  return function(scope, element, attr) {
    var bodyWidth = $document[0].body.clientWidth;
    console.log("width of body is "+ bodyWidth);
  };
});

<button my-directive>Sample Button</button>

You could also use the DOM traversal methods provided in jqLite (though they are much less powerful than what jQuery offers). For example, you could do a recursive lookup using the angular.element.parent() method to find the body tag.

Related Solutions

Javascript – How to check if an element is hidden in jQuery

Since the question refers to a single element, this code might be more suitable:

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

It is the same as twernt's suggestion, but applied to a single element; and it matches the algorithm recommended in the jQuery FAQ.

We use jQuery's is() to check the selected element with another element, selector or any jQuery object. This method traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match, otherwise return false.

Javascript – How to know which radio button is selected via jQuery

To get the value of the selected radioName item of a form with id myForm:

$('input[name=radioName]:checked', '#myForm').val()

Here's an example:

$('#myForm input').on('change', function() {
   alert($('input[name=radioName]:checked', '#myForm').val()); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="radio" name="radioName" value="1" /> 1 <br />
  <input type="radio" name="radioName" value="2" /> 2 <br />
  <input type="radio" name="radioName" value="3" /> 3 <br />
</form>

Best Answer

Related Solutions

Javascript – How to check if an element is hidden in jQuery

Javascript – How to know which radio button is selected via jQuery

Related Topic