angularjs と html5 を使用して動的コントロールを作成するための簡単なサンプル プロジェクトを作成しました。
動的に生成されるプロパティとイベント属性を持つ一連のコントロールを含む xml ファイルがあります。
最初に、すべての動的コントロールが xml ファイルから読み込まれ、angular js 要素として解析されます。
動的に作成されたボタンをクリックしているときに、xml ファイルで指定されたボタン クリック イベントをトリガーし、xml で指定されたテキスト ボックスやその他の入力コントロール (チェックボックスなど) にバインドされた値を取得する必要があります。
サンプル 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>
私の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);
};
}
私の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>
私が正しい方法で行っているかどうかを教えてください。また、ボタン クリック イベントを発生させてng-modelバインドされたコントロールの値を取得するのを手伝ってください。
ありがとう、
G.$@M