I have created a simple sample project for dynamic control creation using angularjs and html5.
I have a xml file with the set of controls with property and event attributes to be generated dynamically.
Intially,all my dynamic controls will be loaded from the xml file and it is parsed as angular js elements.
While clicking the dynamically created button, I have to trigger the button click event specified in the xml file, and Get the values bound with the text boxes and other input controls (checkbox,...) specified in the xml.
Sample XML
<?xml version="1.0" ?>
<page>
<!--<textbox type="text" name="txt" id="txtemail" text="" caption="Eamil Address" ngmodel="user.email" />-->
<textbox value='{ "BindingElementName": "Email","caption":"Email Address","id":"txtemail","name":"txt","type":"text" }'/>
<checkbox value='{ "BindingElementName": "Use","caption":"I want to use email as my username","id":"chkemail","name":"chk","type":"check" }' />
<textbox value='{ "BindingElementName": "UserName","caption":"UserName","id":"txtuser","name":"txtuser","type":"text" }' />
<textbox value='{ "BindingElementName": "Password","caption":"Password","id":"txtpass","name":"txtpasswd","type":"password" }'/>
<textbox value='{ "BindingElementName": "CPassword","caption":"Confirm Password","id":"txtcpass","name":"txtcpasswd","type":"password" }'/>
<textbox value='{ "BindingElementName": "Answer","caption":"Answer","id":"txtans","name":"txtans","type":"text" }'/>
<checkbox value='{ "BindingElementName": "Agree","caption":"I agree to sites terms and condition","id":"chkagree","name":"chkagree","type":"check" }'/>
<checkbox value='{ "BindingElementName": "Remember","caption":"Remember me on this computer to skip security questions next sign-in","id":"chkremember","name":"chkremember","type":"check" }' />
<button value='{ "name":"btn1","type":"button","id":"btn1", "text":"Start My Return", "click":"handleClick()"}'/>
<button value='{ "name":"btn2","type":"button","id":"btn2", "text":"Start My Return1", "click":"handleClick()","handles":""}'/>
</page>
My app.js
var app = angular.module('myApp', []);
var addDiv = $('#container');
app.directive('contentItem', function ($document, $compile) {
var button = '<button ng-click={{content.click}} >{{content.text}}</button>';
var getTemplate = function (controls, attributes, controltype) {
var template = '';
var control;
if (controls[0] === undefined) {
control = controls;
} else {
control = controls[0];
}
var bindvalue;
switch (controltype) {
case "text":
var textbox = "{{content.caption}}:<input name= {{content.name}} id= {{content.id}} type='text' ng-model='" + control.content.BindingElementName + "' />{{" + control.content.BindingElementName + "}}<br><br>";
template = textbox;
break;
case "password":
var textboxpass = "{{content.caption}}:<input name= {{content.name}} id= {{content.id}} type='password' ng-model='" + control.content.BindingElementName + "' />{{" + control.content.BindingElementName + "}}<br><br>";
template = textboxpass;
break;
case "check":
var checkbox = "<input type='checkbox' name={{content.name}} id={{content.id}} ng-model='" + control.content.BindingElementName + "' ng-true-value='YES' ng-false-value='NO' />{{content.caption}} {{" + control.content.BindingElementName + "}} <br><br>";
template = checkbox;
break;
case "button":
control.handles = function () {
var sssc = control.content.Email;
alert(sssc);
//want to construct the object here.....
};
// (or)
$document.on(
"click", "#" + control.content.id,
function ($scope) {
control.$apply(
function () {
alert("Hi");
//want to construct the object here.....
}
);
}
);
template = button;
break;
default:
alert("default");
}
return template;
};
var linker = function (scope, element, attributes) {
var test = getTemplate(scope, attributes, scope.content.type);
element.html(test).show();
$compile(element.contents())(scope);
};
return {
restrict: "E",
rep1ace: true,
link: linker,
scope: {
content: '='
}
};
});
function ContentCtrl($scope, $http) {
debugger;
'use strict';
$scope.url = 'GenerateXML/Controls.xml?000000';
$scope.content = [];
var jsonObj = [];
$scope.element = [];
$scope.fetchContent = function () {
$http.get($scope.url).then(function (result) {
var xml = $.parseXML(result.data);
{
var obj = $.xml2json(xml);
//for sorting the controls as per in xml file.
$.each(obj, function (i, item) {
var test = jQuery.parseJSON(item.value);
jsonObj.push(test);
});
$scope.content = jsonObj;
}
});
};
$scope.fetchContent();
$scope.handleClick = function () {
alert('Hello ' + $scope.content.Email);
};
}
My Html5
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
<title></title>
<script src="Scripts/json2.js"></script>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<!-- <script src="Scripts/jquery-2.0.3.min.js"></script>-->
<script src="Scripts/jquery.xml2json.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="lib/Dynamic.js"></script>
</head>
<body>
<div id="container" ng-controller="ContentCtrl">
<content-item ng-repeat="item in content" content="item"></content-item>
</div>
</body>
</html>
Please suggest me whether i'm going in right way and also assist me on raising the button click event to get the ng-model binded controls values.
Thanks,
G.$@M
