I have a custom directive called HandleScroll and I need to add this directive to all input elements. When I initially built it , it was only needed on one input elements so I added it manually as:
< Input handle-scroll....
But now I realize that I need to add this directive to each and every input element. Is there an easy way to do this using Javascript or will I have to sit and manually add this directive to each input tag ?
Update----Thank you everyone for your help, due to some updates I no longer need to use the directive , but need to bind an event listener to each input field. I've posted the new question at: Adding an event listener to each input field , if you can help please do , I greatly appreciate it !
In your directive class, you can set the selector in your decorator :
#Directive({
selector: 'input'
})
export class HandleScroll...
You can wrap input with angular component. And just use the component everywhere.
<app-input-with-directive></app-input-with-directive>
In AngularJS you can use following.
function MyCtrl($scope, $compile, $window, $document) {
$window.onload = function() {
var inputs = $document[0].querySelectorAll('input');
inputs.forEach(input => {
input.setAttribute('handle-scroll', true);
$compile(input, $scope);
});
};
}
Basically, we are trying to add a new attribute to each input element on the page and recompiling the element.
Related
I want to invoke a method on click of Any div with a given class. In JQuery it was a trivial one liner. Do we have something similar in Angular?
I know we can use a (click) binding to invoke a method on click. But that would require a separate binding for each instance of the div. I want a generic way to bind every div for the given class - as we used to do with JQuery selectors
In Angular you can create a custom directive, assign it to the required blocks and create a click listener via #HostListener.
For example:
HTML
<div appMyDirective>
div 1
</div>
<div appMyDirective>
div 2
</div>
Directive
#Directive({
selector: '[appMyDirective]'
})
export class MyDirectiveDirective {
constructor() { }
#HostListener('click') onClick() {
console.log('Привет')
}
}
May be it suit you
Angular has absolutely different approach. Instead of querying the DOM, we typically bind the event handlers in the markup.
<button (click)="onSave()">Save</button>
Event binding
Can you please elaborate on what you are trying to achieve,will specify the basic of using click and ngClass in angular see if it helps
In you HTML file
<div class="my_class" (click)="clickDiv()"
[ngClass]="isActive ? 'active' : 'notActive'">
Some content
</div>
In .ts file
isActive : boolean = false ;
clickDiv(){
this.isActive = !this.isActive;
}
I have custom attribute my-custom-attribute which contains the id for the element I need to add and remove this attribute depending on the boolean.
I already tried this code and it is working fine, is there any way to make it using vuejs directives?
HTML:
<div my-custom-attribute="my_element">
...
</div>
JS:
const el = document.getElementById("some_id");
if(my_bool) {
el.setAttribute("my-custom-attribute", "#my-element");
} else {
el.removeAttribute("my-custom-attribute")
}
You can register a directive as global using the below example, it provides you three lifecycle hooks for you to control the behavior, read the following and try to implement. Let us know if any problem occurs with your implementation and start a separate thread
https://v2.vuejs.org/v2/guide/custom-directive.html
Vue.directive('my-custom-directive', {
// When the bound element is inserted into the DOM...
inserted: function (el) {
// Focus the element
el.focus()
}
})
Hey there, I have some elements with the same custom directive but different values in my page.
I want to get all elements with that directive to process on them.
When I use this code:
Vue.directive('can', function (value) {
console.log(value)
})
it just gave me the first element with the can directive, not all of them, so how I can get all of the elements with the can directive?!
Update:
my elements are like so:
<button v-can="'register-permission'">Register</button>
<button v-can="'buy-permission'">Buy</button>
<button v-can="'Sell-permission'">Sell</button>
I want to access all buttons with the v-can directive in page! How can it be done?
Following Vuejs documentation on custom directive, I would access all of them like this:
Vue.directive('can', {
bind: function (el, binding, vnode) {
console.log(binding.expression)
}
})
How can I add a class to element not if condition is true,
<div ng-class="{myClass: true/false}">
but if event is occurred. For example I have td, which displays some variable.
<td>{{myVar}}</td>//myVar=10
And when variable changed myVar=15 I add a constant class to div, which(class) don't depends on condition any more. Is it possible at all?
Try this in your angular controller. Note that i'm selecting all divs in HTML using querySelector while you should select the div as per your requirement
$scope.$watch('myVar', function() {
var myEl = angular.element(document.querySelector('div'));
myEl.addClass('myClass');
}, true);
I am trying to add a directive to an HTML element on a specific event through jQuery .attr(). This directive does not do its work after adding it.
angular.module("myApp", [])
.directive("myDirective", function() {
restrict: "A",
link: function () {
alert("Hello");
}
});
When I use it directly in html, it works fine:
<div id="myDiv" my-directive></div>
But when I try adding it after a while with jQuery:
$("#myDiv").attr("my-directive", "")
it does not do anything.
How can I add a directive to an HTML element in this situation?
As you are adding it dynamically when all the compilation is performed, you need to recompile it in order the directive to apply.
$("#myDiv").attr("my-directive", "");
var elem = $("#myDiv");
$compile(elem )($scope);
$̶s̶c̶o̶p̶e̶.̶$̶a̶p̶p̶l̶y̶(̶)̶;̶
Inject the $compile in controller. The compilation is done on jQuery element(which is non angular context), ̶y̶o̶u̶ ̶n̶e̶e̶d̶ ̶t̶o̶ ̶r̶u̶n̶ ̶̶$̶s̶c̶o̶p̶e̶.̶$̶a̶p̶p̶l̶y̶(̶)̶;̶.
Try this. you need to recompile it dynamically using $compile
$("#myDiv").attr("my-directive", "");
$("#myDiv").html($compile($("#myDiv").html())($scope));
̶$̶s̶c̶o̶p̶e̶.̶$̶a̶p̶p̶l̶y̶(̶)̶;̶
But getting element using $ is not a good solution. $ is very precious. So, store the element in one variable to not to get each time.
var element = $("#myDiv");
element.attr("my-directive", "");
element.html($compile(element.html())($scope));
̶$̶s̶c̶o̶p̶e̶.̶$̶a̶p̶p̶l̶y̶(̶)̶;̶