由ng-repeat驱动的AngularJS ng-model表单对UI模型描述数据如何？

Question

JSFiddle http://jsfiddle.net/vorburger/hyCTA/3/ 展示了我对 AngularJS 的（工作）“UI 建模”想法；请注意，表单实际上并未在 HTML 模板中编码，它由 uimodel JSON 驱动（反过来描述了如何呈现/编辑数据模型）：

<div ng-repeat="auimodel in uimodel">
    <label>{{$index + 1}}. {{auimodel.label}}</label>
    <input ng-model="datamodel[auimodel.model]" type="{{auimodel.type}}" />
</div>

问题是，一旦我的“模型”不是一个简单的属性，而是一个“路径”，那么我的方括号动态键“技巧”当然就不再起作用了。 ）http://jsfiddle.net/vorburger/8CxRC/1/JSFiddle。有什么建议可以做到这一点吗？

PS：或者这样的事情是否一定需要一个完整的自定义指令而不是迟早？如果可能的话，我宁愿不必这样做，以使此类 UI 模型“元模板”的创建和维护尽可能简单......

Answer 1

我自己想出了一个（但可能不是最好的？）方法来实现这一点。见http://jsfiddle.net/vorburger/8CxRC/3/ - 基本上仍然基于我的方括号动态键“技巧”，但有一些预处理：

   for (var i = 0; i < $scope.uimodel.length; i++) {
        var resolvedModelProperty = $scope.datamodel;
        var remainingPath = $scope.uimodel[i].model;
        while (remainingPath.indexOf('.') > -1) {
            var nextPathSlice = remainingPath.substr(0, remainingPath.indexOf('.'));
            resolvedModelProperty = resolvedModelProperty[nextPathSlice];
            remainingPath = remainingPath.substr(remainingPath.indexOf('.') + 1);
        }
        $scope.uimodel[i].modelB = resolvedModelProperty;
        $scope.uimodel[i].modelL = remainingPath;
    }

Answer 2

你和我自己的项目Metawidget 是一样的。 Metawidget 相当于你所追求的，由 metawidget.angular.widgetprocessor.AngularWidgetProcessor 覆盖：

https://github.com/metawidget/metawidget/blob/master/modules/js/angularjs/src/main/webapp/lib/metawidget/angular/metawidget-angular.js

虽然我没有发现需要使用方括号表示法（我只是做了 foo.bar.baz）。还有魔法线：

$compile( widget )( scope.$parent );

这会将您动态实例化的原始 HTML 转换为功能齐全的 Angular 代码。

如果您有机会查看 Metawidget，非常感谢您的反馈！教程开始here。