我有几分这里复杂的需求（一个真正的头饼刷）...和我不知道的最佳方式进行：AngularJS：如何从任意类型获取属性？
要求：
建立管理页面小部件（CMS内容块）MVC5使用AngularJS作为前端（根据管理UI的其余部分）。问题是每个小部件都有自己特定的一组属性。他们都有着像Title，IsEnabled等一些特性。但一个HTML控件，例如将有一个的BodyContent场和一个滑块控件将有图像等的集合..
我首先想到的是用[UIHint]和Html.EditorFor这样每个控件类型都会有自己的标记。我认为这很简单，但是我们怎么能从任何这样的任意小部件中获取属性到AngularJS模型中？
示例控制器
widgetsApp.controller('widgetController', function ($scope, $http) {
$scope.emptyGuid = '00000000-0000-0000-0000-000000000000';
$scope.id = $scope.emptyGuid;
$scope.title = '';
$scope.order = 0;
$scope.enabled = false;
$scope.widgetType = '';
$scope.zoneId = $scope.emptyGuid;
// etc
// how to get properties of ANY widget type?
这甚至可能吗？有更好的解决方案吗？请注意，如果它可以支持我的要求，我可能会考虑将代码更改为使用Knockout或其他此类框架。
编辑
注意的问题是，由于需要对再通过这样的模式返回到服务器，并与它打交道存在的事实进一步复杂化。在常规的MVC控制器中，我可以使用Request.Form来检查其他值，但我使用的是Web API，并且不确定这是否可能。
编辑2
好了，所以我觉得我在正确的轨道上，但仍然有问题。首先，这里是我的进步：
我发现了.factory，并提出了测试页是这样的：
<div ng-app="myApp">
<div ng-controller="controller1">
<button class="btn btn-primary" ng-click="showAllInfo()">Show Info</button>
</div>
<div ng-controller="controller2">
</div>
</div>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.factory('widgetModel', function() {
return {
id: '00000000-0000-0000-0000-000000000000',
title: '',
order: 0,
enabled: false,
widgetName: '',
widgetType: '',
zoneId: '00000000-0000-0000-0000-000000000000',
displayCondition: '',
widgetValues: '',
pageId: null,
cultureCode: '',
refId: null,
};
});
// This is representative of the main controller
myApp.controller('controller1', function ($scope, widgetModel) {
$scope.emptyGuid = '00000000-0000-0000-0000-000000000000';
$scope.model = widgetModel;
$scope.model.id = $scope.emptyGuid;
$scope.showAllInfo = function() {
alert("id: " + $scope.model.id + ", New Property: " + $scope.model.myNewProperty);
};
});
// This is representative of the details controller (to add properties specific to that particular widget type)
myApp.controller('controller2', function ($scope, widgetModel) {
$scope.model = widgetModel;
$scope.model.myNewProperty = "My Awesome Widget";
});
</script>
上述测试工作很漂亮。但是，当我使用这种代码在我的实际应用它不能工作，我相信原因是因为第二控制器注入DOM后来..这里发生的事情：
我有一个div如下
<div ng-bind-html="widgetDetails"></div>
和加载等细节后，我加载HTML该这样：
$http.get("/admin/widgets/get-editor-ui/" + $scope.model.id).success(function (json) {
$scope.widgetDetails = $sce.trustAsHtml(json.Content);
});
这工作。我可以看到我的HTML控件为我的新特性有..下面的代码片段是HTML将其注入到上述div：
<div ng-controller="widgetDetailsController">
<div class="col-sm-12 col-md-12">
<div class="form-group">
@Html.Label("BodyContent", "Body Content", new { @class = "control-label" })
@Html.TextArea("BodyContent", null, new { @class = "form-control", ng_model = "model.bodyContent", ui_tinymce = "tinyMCEOptions_BodyContent" })
</div>
</div>
<button class="btn" ng-click="test()">Test</button>
</div>
<script type="text/javascript">
widgetsApp.controller('widgetDetailsController', function ($scope, $http, widgetModel) {
$scope.model = widgetModel;
$scope.json = angular.fromJson($scope.model.widgetValues);
$scope.model.bodyContent = $scope.json.bodyContent || "";
$scope.test = function() {
alert($scope.model.bodyContent);
};
});
</script>
当我点击，“测试”按钮，没有任何反应...
我试图通过这个链接中列出的方法动态加载控制器：http://www.bennadel.com/blog/2553-loading-angularjs-components-after-your-application-has-been-bootstrapped.htm
它不工作。说实话，我是AngularJS的新手，并没有真正了解所有的缺陷。任何帮助都会很棒。
大量的编辑...你可能会得到更好的答案分裂在两个问题。 – 2014-09-20 15:57:43
该html仍包含服务器端标记。这是行不通的。 – Chandermani 2014-09-21 03:30:52