Angular JS designs web page using client-side technology. The model-view-controller is established in client-side. JSF requires data-binding have to be on server side at minimum. Given an example like this
<div data-ng-app="jtest" data-ng-controller="IntsCtrl">
<form >
<input data-ng-model="test" type="text" id="test" value="My Value" />
<input data-ng-model="ints" type="text" id="ints" value="[3,5,7]" />
<div>
<input type="text" data-ng-repeat="v in ints track by $index" data-ng-model="v" data-ng-change="changeValue(v)"/>
</div>
</form>
</div>
This is a piece of HTML supported by angular JS. The value='My Value' is generated by JSF at server-side. The issue is that default value will be discarded by angular after the template is processed since the initial value comes from model which is empty at the beginning. So how can we ask angular to initialize value from element value attribute?
This post gives a brilliant idea:add a directive to initialize the model value from input attribute. I modifies the script a little bit to accept a mode for value initialization.
var app = angular.module('forms', []);
app.directive('ngInitial', function() {
return {
restrict: 'A',
controller: [
'$scope', '$element', '$attrs', '$parse', function($scope, $element, $attrs, $parse) {
var getter, setter, val, mode;
mode=$attrs.ngInitial;
val=$attrs.value||$element.text();
//val=$element.val();
if ("eval"==mode)
{
val=eval(val);
}
getter = $parse($attrs.ngModel);
setter = getter.assign;
setter($scope, val);
}
]
};
});
You can modify this script and add more mode to suit your situation.
To load this directive, make you module depends on this one like this:
angular.module('jtest', ['forms']);
Wonderful Post!!! Thanks for sharing this great blog with us.
ReplyDeleteAndroid Training in Chennai
Android Training Institute in Chennai
android training center in chennai
app development course in chennai
Android Training in Tnagar
Android training in Thiruvanmiyur
Big data training in chennai
Software testing training in chennai
Selenium Training in Chennai
JAVA Training in Chennai
Great Article Artificial Intelligence Projects
DeleteProject Center in Chennai
JavaScript Training in Chennai
JavaScript Training in Chennai Project Centers in Chennai
Popular Fashion Blogs in Surat
ReplyDeleteFashion Blogger in Surat
Surat Blogger
Indian Fashion Blogger
Fashion Blogger in India
Great efforts put to publish these kinds of articles that are very useful to know. I’m thoroughly enjoying your blog. And Good comments create great relations. You’re doing an excellent job. Keep it up.
ReplyDeleteMagento Development Training Course in Chennai Zuan Education
Selenium Training Course in Chennai Zuan Education
Such a wonderful article and I feel that it is best to write more on this topic. Thank you so much because i learn a lot of ideas about it. Keep posting...
ReplyDeleteDigital Marketing Course In Kolkata
Web Design Course In Kolkata
SEO Course In Kolkata
Aivivu đại lý vé máy bay, tham khảo
ReplyDeletevé máy bay đi Mỹ khứ hồi
vé máy bay hà nội sài gòn tháng 2
vé máy bay đi hà nội bamboo
vé máy bay vinh nha trang
vé máy bay pacific airlines đi quy nhơn
taxi đi sân bay giá rẻ
combo vinpearl phú quốc 3 ngày 2 đêm 2021