我使用angularjs和html5为动态控件创建了一个简单的示例项目。
我有一个xml文件，其中包含要动态生成属性和事件属性的控件集。
最初，我的所有动态控件都将从xml文件加载，并被解析为angular js元素。
单击动态创建的按钮时，我必须触发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>
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);
};
}
<!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。$ @米