Instead of going into all of the views in an AngularJS application, is there an easier way to add the spellcheck="false" attribute dynamically to all forms in an AngularJS application?
Once added, every form in the application would be like this:
<form spellcheck="false">
Angular actually overrides the HTML FORM element as a directive.
https://github.com/angular/angular.js/blob/master/src/ng/directive/form.js
You can decorate this directive in your app configuration like so:
angular.module('app', [])
.config(['$provide', function ($provide) {
$provide.decorator('formDirective', ['$delegate', function ($delegate) {
var formDirective = $delegate[0];
var oldCompile = formDirective.compile;
formDirective.compile = function (tElement, tAttrs, transclude) {
// get original links
var compile = oldCompile ? oldCompile.apply(this, arguments) : {};
tElement.attr("spellcheck", "false");
return compile;
};
return $delegate;
}]);
}]);
Why don't you just add it with jQuery after the DOM loads?
$(document).ready(function () {
// ... cool onLoad stuff
// Set form spellcheck attributes to false
$('form').attr('spellcheck', false);
});
setAttribute supported by all mainstream browsers.
So the simple way is just as follows(no jQuery needed):
angular.element(document).ready(() => {
// type of attribute value should be String
document.body.setAttribute('spellcheck', 'false');
});
the most simple answer is to add the attribute spellcheck="false" directly to your body element(WHY NOT?).
Related
I've been searching for an answer to simple but not trivial question: What is a right way to catch image' onload event in Angular only with jqLite? I found this question , but I want some solution with directives.
So as I said, this is not accepted for me:
.controller("MyCtrl", function($scope){
// ...
img.onload = function () {
// ...
}
because it is in controller, not in directive.
Here's a re-usable directive in the style of angular's inbuilt event handling directives:
angular.module('sbLoad', [])
.directive('sbLoad', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
var fn = $parse(attrs.sbLoad);
elem.on('load', function (event) {
scope.$apply(function() {
fn(scope, { $event: event });
});
});
}
};
}]);
When the img load event is fired the expression in the sb-load attribute is evaluated in the current scope along with the load event, passed in as $event. Here's how to use it:
HTML
<div ng-controller="MyCtrl">
<img sb-load="onImgLoad($event)">
</div>
JS
.controller("MyCtrl", function($scope){
// ...
$scope.onImgLoad = function (event) {
// ...
}
Note: "sb" is just the prefix I use for my custom directives.
Ok, jqLite' bind method doing well its job. It goes like this:
We are adding directive' name as attribute in our img tag . In my case , after loading and depending on its dimensions , image have to change its class name from "horizontal" to "vertical" , so directive's name will be "orientable" :
<img ng-src="image_path.jpg" class="horizontal" orientable />
And then we are creating simple directive like this:
var app = angular.module('myApp',[]);
app.directive('orientable', function () {
return {
link: function(scope, element, attrs) {
element.bind("load" , function(e){
// success, "onload" catched
// now we can do specific stuff:
if(this.naturalHeight > this.naturalWidth){
this.className = "vertical";
}
});
}
}
});
Example (explicit graphics!): http://jsfiddle.net/5nZYZ/63/
AngularJS V1.7.3 Added the ng-on-xxx directive:
<div ng-controller="MyCtrl">
<img ng-on-load="onImgLoad($event)">
</div>
AngularJS provides specific directives for many events, such as ngClick, so in most cases it is not necessary to use ngOn. However, AngularJS does not support all events and new events might be introduced in later DOM standards.
For more information, see AngularJS ng-on Directive API Reference.
I've AngularJS issue when there are some elements(button) generate dynamically or generate after init AngularJS. Source code below shows the button not able to trigger the ng-click attribute. Any ideas that can trigger the AngularJS attribute after init the AngularJS. Thanks.
OperationFormatter: function (value, row) {
var operations = [];
operations.push('<button class="btn-mini glyphicon glyphicon-edit" ng-
click="myFunc()" title="Shared_Edit"></button>');
return operations.join(' ');
// This function only can execute after init the AngularJS due to certain
conditions.
}
$(function () {
MyCtrl();
})
function MyCtrl($scope) {
var app = angular.module("appAffiliateInfo", []);
app.controller("ctrlBankInfo", function ($scope) {
$scope.myFunc = function () {
alert('ok');
};
});
};
I assume you're trying to dynamically insert the generated HTML code in your template.
It cannot be done this way, as AngularJS already parsed your template at "runtime" and created all its watchers.
You have to use the $compile service, like so:
// scope: the scope containing the function called by ng-click
// htmlCode: your html code (as a string)
var newElem = $compile(htmlCode)(scope);
// use the proper code here, depending on what you want to achieve with the HTML element
document.body.appendChild(newElem[0]);
When "compiled" by $compile, the HTML code is parsed in order to create the required watchers. You must make sure that you provide the correct scope to $compile, or the function intended to ng-click will never be called.
I read quite a few articles about overriding directive but I didn't find a way to correctly prevent a directive from being executed.
Actually I'm using ionic framework, and I'd to like to prevent the default select directive to be executed since it doesn't work on a Microsoft surface...
Any Idea how to do this ?
Ty.
Well, this is an idea :
module.config(['$provide', function($provide) {
$provide.decorator('selectDirective', function($delegate) {
return {};
});
}])
Although it would break the native < select > element, so you might want to disable parts of your directives like this:
module.config(['$provide', function($provide) {
$provide.decorator('selectDirective', function($delegate) {
var directive = $delegate[0];
directive.template = '';
return directive;
});
}])
We are using bootstrap datepicker for our project needs. What we need to do is that whenever user selects the today's date, date has to be shown appended with "(TODAY)" like "May 12, 2008 (TODAY)" in the textbox.
What can be the best approach here? As we are using this datepicker at multiple places, I think having a general approach like creating a directive would be helpful. Was trying to bind change event with the datepickerPopup directive, but have not been able to make it work.
Here is what I have tried so far:
Have created one decorator. This seems to be working. However one issue, how do I access the parent directive methods in this decorator (such as dateFilter, parseDate here)? (sorry if you find my questions naïve, as I am very new to angularjs). I have attached the code.
app.config(function($provide) {
$provide.decorator('datepickerPopupDirective', function($delegate) {
var directive = $delegate[0],
link = directive.link;
//closeOnDateSelection = angular.isDefined(attrs.closeOnDateSelection) ? scope.$parent.$eval(attrs.closeOnDateSelection) : datepickerPopupConfig.closeOnDateSelection,
//angular.extend(directive.scope, { 'monthChanged': '&' });
directive.compile = function() {
return function(scope, element, attrs, ngModel) {
link.apply(this, arguments);
ngModel.$render = function() {
var date = ngModel.$viewValue ? dateFilter.apply(ngModel.$viewValue, dateFormat) : '';
var currentDate = new Date();
currentDate.setHours(0,0,0,0);
if(date.getTime() == currentDate.getTime()){
element.val(date + "(TODAY)");
}else{
ngModel.$setViewValue(scope.date);
}
scope.date = parseDate( ngModel.$modelValue );
};
};
};
return $delegate;
});
});
You've got a couple of options. The quick and dirty way would be to extract the component from the third party library into your own directive and template, and modify as needed. The disadvantage to this is that you'll no longer be up to date with the component. Future versions would require you to manually update your directive, which you might not care about... yet.
The second option, is to take advantage of angular's $provide.decorator
This post gives you an initial idea
What are "decorators" and how are they used?
Here's a basic example of decorating a directive definition object
app.directive("foo", function() {
return {
replace: true,
template: '<div>This is foo directive</div>'
};
});
app.config(function($provide) {
$provide.decorator('fooDirective', function($delegate) {
var directive = $delegate[0];
directive.restrict = "AM";
return $delegate;
});
});
In your case, you'll want to override what value is being referenced on the template. You could decorate the entire directive if you want to completely modify it.
I would recommend this as the best approach when looking to tackle modification of a third party library.
Here's an example of decorating a directive to override a scope level function, and use an existing scope variable within the directive while overriding it.
https://jsfiddle.net/wvty8rpc/3/
I'm creating a project using NodeJS, Express and AngularJS that will have a search form (added via custom directive) and a search results that must be loaded only after the search button is pressed.
The problem is that the method I have created inside the controller can't be found from the search form.
Here is a sample of my code:
app.js
(function() {
var app = angular.module('app', ['app-directives']);
app.controller('AppController', function() {
this.buttonClick = function() {
alert('Test');
};
});
})();
directives.js
(function(){
var app = angular.module('app-directives', []);
app.directive('searchForm', function() {
return {
retrict: 'E',
templateUrl: '/partials/search-form.html'
};
});
app.directive('searchResults', function() {
return {
retrict: 'E',
templateUrl: '/partials/search-results.html'
};
});
})();
search-form.html
<input type="text" id="query" />
<button onclick="buttonClick">Search</button>
page-content.html
<section id="mainContent">
<search-form></search-form>
<search-results></search-results>
</section>
UPDATE
The second question will be posted in another thread.
About your first question:
You are using onclick attribute instead angular's 'ng-click' in the button search. This could be the problem. And do not forget to also add the 'ng-app' and 'ng-controller' tags. If not, your method will never be visible.
I also would recommend you to use $scope service instead of 'this' for attaching models and functions you later will use in your views.
Regards