form validations using a directive not working - javascript

i am new to angularJs.... i am trying to write a directive which wraps the input box inside a form tag and followed by a 'div' which includes validation. validation is not working.
plunker link : PLUNKER
i am wrapping the input tag using the following code
var getHtml = function(){
return '<div data-ng-show="myform.myfield.$error.required &&myform.myfield.$dirty ">field is required</div>';
}
element.attr('name','myfield');
element.wrap('<form name="myform"></form>');
element.after(getHtml());

Thats because you didn't compile the form element.
Insetead of:
$compile(element.contents())(scope);
You have to:
$compile(element.parent())(scope);
But that itself would cause an infinite loop of compilations so you have to remove the cs-options attribute before that compilation. Also you have to do this in pre compile rather than post compile (i.e. linking phase).
Working example here: http://plnkr.co/edit/hEbRbwPqi64vZ4CNGf5N?p=preview

Related

Angular character encoding issue contenteditable div

I'm using a combination of Angular and a contenteditable div to try and create a two way binding that I can later use an Angular controller to manipulate the data. Everything has been working great, with the exception of certain html characters that make there way into the model.
For example, when I type & I get & when there is a nonbreaking space I get nbsp;
How do I modify the contenteditable directive to clean the encoded values out and only keep the unencoded versions?
Plunkr here - http://plnkr.co/edit/ToylycanYcMJq15K36Yd?p=preview
You will see in the contenteditable directive I have this line:
html = element.html().replace(' ','');
To try and replace the values, but it's having no affect...
Although you can do something like this, but I think you would be better using input or textarea for the same. According to docs AngularJS Models support only input, select or textarea.
Also there is an open issue for the same problem that you are facing.
Here is the code if you intend to use contenteditable div:
var myApp = angular.module('app',[]);
myApp.controller('chatterCtrl', ['$scope', function($scope) {
$scope.$watch('comment', function(){
if($scope.comment != undefined){
$scope.comment = unescape($scope.comment);
}
}, true);
}]);

angularjs directive: not replace nor transclude

I need to append a directive's template AFTER an input field. The original input field needs to remain - I can't just create a duplicate of it. My thought for this was to, in the controller, use jQuery to add a DIV after the input field, and add an attribute for the directive to the div. However, in practice, that doesn't work - the div is created and added, but the directive doesn't activate.
The problem, I know, is that the jQuery-added div is not yet recognized by the angularjs controller - it appears AFTER angularjs runs over the controlled html.
I know that part of the problem is that you're not supposed to use jQuery in the controller, but I honestly can't think of another way to do it. Is there some way to cause the angularjs controller to look at this new div?
The original HTML looks like the following.
<input name="generatedString_1234567890">
I run jquery over the page to add a controller to the body. The relevant code looks similar to this:
jQuery('body').attr('ng-controller','MainCtrl');
angular.module('app',['DataTools']);
angular.element(document).ready(function(){
angular.bootstrap(document, ['app']);
});
Inside the angularjs, I run a resource to get a json string containing the relevant changes to the DOM, in terms of attributes that need to get added to the inputs and certain understood flags that require specific coding. The relevant task I'm trying to accomplish looks like this, where $(this) is the input field for the DOM.
jQuery(document).find('input.FormField,select.FormField').each(function(){
// Inside a case statement based on certain flags
var d = $('<div/>');
d.attr("ng-model", 'adors.'+label);
// Relevant code that adds attributes to the div - including the required directives
$(this).hide().after(d);
}
I am trying to create code that looks more like this (VERY GENERIC):
<input name="generatedString_1234567890" ng-hide="true" ng-model="input.uniqueKey">
<div special-input="time" ng-model="input.uniqueKey">
<select ng-repeat="hour in hours">
<select ng-repeat="minute in minutes">
</div>

How to add angular js module inside an existing application

I am trying to add an angular JS module inside an already existing code. I'm actually trying to add a new piece of code inside it. The workflow goes like this. When a button is clicked, the JS takes a template and adds it to the dom. In this added template, i would like to insert the new angular JS module. I am trying to atleast show hello world inside the module but haven't been successful.
Let's say when a button is clicked, i'm adding the below tag to the dom
<div patient-details ng-controller='patientDetailsCtrl' id='patientDetails'></div>
This is added through jquery or javascript. How do i make it work with the below directive
angular.module('patientDetailsModule',[])
.directive('patientDetails',function($compile){
return{
//restrict: 'E',
template: "<div>Hello World!!!{{name}}</div>"
};
});
You need to use $compile. $compile() will make sure all the Angular code in your html snippet will be compiled!
Here is an example.
http://plnkr.co/edit/7Wr3oAtvZ8cn31uFFEOs?p=preview
Send Message from nc-click to directive
Directive receives message, compiles html and appends new element
var template = "<div patient-details ng-controller='patientDetailsCtrl' id='patientDetails'>Element added</div>";
var newElement = angular.element(template);
$compile(newElement)(scope);
element.append(newElement);
// can also use element.replaceWith(newElement);

AngularJS to render a template inside a compile inside a loop inside a partial

I have a partial, which has a directive which renders a bunch of things in a loop, using compiled HMTL-as-a-string inside the directive. This HTML-as-a-string itself contains an ng-include, which doesn't render out.
Please see my jsfiddle example
Basically, this doesn't include template2.html:
element.html('<span>The name is ' + scope.content.name + '!</span><div ng-include src="template2.html"></div><br>');
Any pointers would be much appreciated.
Thanks!
WORKING DEMO
just needed to write as
src=" \'template2.html\'"
var linker = function(scope, element, attrs) {
element.html('<span>The name is ' + scope.content.name + '!</span><div ng-include src=" \'template2.html\'"></div><br>');
$compile(element.contents())(scope);
};
more info in DOCS
Vinod's answer above (replace src="template2.html" with src="\'template2.html\'") is correct, though I would recommend using an actual template instead of manually compiling the template yourself inside the link function. In your example, you aren't actually receiving the benefit of the two way binding. You are just taking the html output of the compile function, and it will never update if the underlying data changes. Here is your example modified to show the bindings (and Vinod's template fix):
http://jsfiddle.net/kf3vZ/5/
Notice how if you change the value of any of the checkboxes, the value in the directives do not change.
Now here is a version using the template argument to the directive:
http://jsfiddle.net/kf3vZ/7/
Now if you change the text fields, the directive values will change also.
Another note, since you are already using the script tags for your templates, you could replace template in your directive with templateUrl and provide the id of the script template.

Hide input-help on form using AngularJS

I'm currently learning AngularJS and i would like to accomplish a simple task.
On a form input, i would like to hide corresponding 'input-help' even data entered in input is invalid.
The way i'm currently doing this invoke some jquery. But i'm searching the way to do it using AngularJS logic. I think i should use directive but as i'm new to angular, i don't know exactly how to do it.
Here is the jsFiddle sample code working using jquery: JSFIDDLE
And here is the jsFiddle sample code not working (no jquery): JSFIDDLE
{For test, enter just few text in password input and blur it}
This is the code i have: {jquery}
$(document).on('blur', '.immediate-help', function () {
$(this).next('.input-help').fadeOut();
}).on('focus', '.immediate-help', function () {
$(this).next('.input-help').fadeIn();
});
This works as expected but i would like to use angular directive to do it. Of course, i'm not against using jquery in angular directive.
So, to resume, i would like when blur input is triggered to hide 'input-help' even the text is not valid and using angular directive.
Could someone show me the right way to do it?
Several approaches:
Using script in directive:
elm argument within directive link callback is a jQuery object if jQuery.js loads before anugular.js in page... or it is a jQlite if jQuery.js not included.
jQlite has many of the most common jQuery methods so you can use :
elm.bind('blur....
See angular.element docs for list of jQlite methods.
Using ng-class
Give form and controls a name. This creates an object formName with properties represented by field names. You can then use angular expressions for classes, or properties like disabled within markup
<form name="myForm">
<input name="passord"/>
<div ng-class="{ShowMeClassName: myForm.password.$invalid}"> Error content</div>
</form>
ng-class will toggle the class ShowMeClassName depending on validity of field named password within form named myForm
You can use Angular-ui.
Angular-UI provides a bunch of directives, which can help you. You have the ui-event directive.
For example you can use
<input ui-event="{ blur : 'blurCallback()' }">
...
<script>
$scope.blurCallback = function() {
alert('Goodbye');
};
</script>

Categories