1

The JSFiddle http://jsfiddle.net/vorburger/hyCTA/3/ illustrates a (working) "UI modeling" idea I had with AngularJS; note the form is not actually coded out in the HTML template, it's driven by uimodel JSON (which in turn describes how the datamodel is to be rendered/edited):

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

Trouble is, as soon as my 'model' isn't a simple property, but a 'path', then my square bracket dynamic keys 'trick' doesn't work anymore of course.. as illustrated by the (broken) http://jsfiddle.net/vorburger/8CxRC/1/ JSFiddle. Any suggestions how one could do this?

PS: Or would something like this necessarily need a complete custom directive rather sooner than later? I’d rather not have to do this, if that’s possible at all, in order to keep creation & maintenance of such UI model “meta templates” as simple as possible...

4

2 回答 2

0

您与我自己的项目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，我将非常感谢您的反馈！教程从这里开始。

于 2013-07-24T23:10:32.483 回答
0

我刚刚想出了一个（但可能不是最好的？）方法来实现这一点。请参阅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;
    }
于 2013-07-24T20:38:04.873 回答