I've got a few custom directives that use jQuery for animation effects (angular's built-in ngShow/ngHide and the like are functional, but not pretty). I think I remember reading in the documentation somewhere that angular has its own DOM selector (something like angular.export()
or angular.select()
) that I should use instead of $(SELECTOR)
; however I can't find it now.
I'm doing something like this:
//view
<div scroll-to="element"> //`element` is set via ng-click
…
</div>
//directive
link: function(scope, elm, attrs)
{
scope.$watch(attrs.scrollTo, function scrollToAction(newValue,oldValue)
{
if ( newValue !== oldValue )
{
elm.animate({
scrollTop:
$('#'+newValue).offset().top //replace jquery selector with angular's
- elm.offset().top
+ elm.scrollTop()
});
}
});
}
I'm not really manipulating $('#'+newValue)
, just retrieving info about it, so I don't think I'm committing a crime against Angular.
What is a Selector in Angular? A selector is one of the properties of the object that we use along with the component configuration. A selector is used to identify each component uniquely into the component tree, and it also defines how the current component is represented in the HTML DOM.
You can use document. getElementById() in Angularjs, but manipulating HTML in a controller is not a good practice.
Answer: C is the correct option. The ng-bind directive is used to bind the application data to the HTML view in the AngularJS application.
Q 19 - Which of the following is true about ng-init directive? A - ng-init directive initializes an AngularJS Application data.
As the official AngularJs doc says
All element references in Angular are always wrapped with jQuery or jqLite (such as the element argument in a directive's compile / link function). They are never raw DOM references.
In details: if you include jQuery before your Angular reference, the angular.element()
function becomes an alias for jQuery (it's otherwise jqLite
, see Mark Rajcok's answer).
You can check in the Dev Tool debugger if you are getting jQuery or jqLite by placing a breakpoint at the line where you call angular.element()
. When hovering it, you will be prompted for the relevant library, see screenshot below (in my case, I get jQuery).
As the official AngularJs doc says
For lookups by tag name, try instead
angular.element(document).find(...)
or$document.find()
In other words: if you get jQuery when calling angular.element()
, then anything like angular.element('#foo > bar')
works if that's what you're thinking of.
If you're wondering how to get this selector feature without jQuery, then you may want to use Sizzlejs. Sizzle is the selector library that jQuery uses under the hood.
"jqLite" (defined on the angular.element page) provides DOM traversal methods like children()
, parent()
, contents()
, find()
, next()
(but not previous()
). There is no selector-like method.
You might want to try JavaScript's querySelector.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With