Question

我正在为客户开发CMS，它全部基于AngularJS及其控制器，视图，服务等。

我需要的是一个模式，其中动态加载的脚本在现有范围中注入一些数据。

好的，用人的话来说：我有一个由控制器管理的表单。此表单有几个预设字段。这些字段由范围数组管理，如：

$scope.fields = [
  { type: "text", name="first_name" },
  { type: "text", name="last_name" },
  { type: "email", name="email" }
];

视图动态打印字段（即它是脚手架）。

当客户登录应用程序时，我会检查他的配置文件中是否有要加载的自定义脚本，如果是这样，应用程序会将一个javascript附加到DOM，则javascript文件名等于已登录用户的用户名。

因此，如果用户被称为“ darko ”并且他启用了自定义脚本，则应用程序会将此文件附加到DOM：

/js/customers/darko.js

假设 darko在表单中显示（并保存）了更多字段，我该怎么做？我需要挂钩控制器，以便我可以访问其范围，然后注入我的字段。类似的东西：

var $scope = getUserFormScope();//some magic....
$scope.fields.push({ type: "text", name="skype" });

然而，带有更多字段的表单只是一个例子，更确切地说，我真正需要的是一种“挂钩控制器”并可以访问其范围的方法。

有什么想法吗？

解

我终于使用了marfarma建议的方法。自定义脚本包含一个或多个部分控制器，这些部分控制器的名称与要扩展的控制器名称相同，前缀为 Custom 字，然后我使用这些部分控制器扩展控制器。例如，我的应用程序有一个名为PageController的控制器，在此控制器中我检查是否存在CustomPageController：

if (typeof CustomPageController == 'function') {
    angular.extend(this, CustomPageController($scope));
}

如果是这样，我使用自定义控制器扩展主控制器。

Answer 1

这是“钩子控制器”的一般方法，可以访问它们的范围 - 通过angular.extend混合你的钩子代码。

function CustomUserController($scope) {
    // contents of this hook controller is up to you

    var _this = this;

    // Mixin instance properties.
    this.vocalization = getValue('vocalization',$scope.user);
    this.runSpeed = getValue('runSpeed'        ,$scope.user);

    // Mixin instance methods.
    this.vocalize = function () {
        console.log(this.vocalization);
    };

    // Mixin scope properties.
    $scope.color = color;

    // Mixin scope methods.
    $scope.run = function(){
        console.log("run speed: " + _this.runSpeed );
    };
}

function PageController($scope) {

    var _this = this;
    $scope.user; // this should be the current user obj, with key for custom script lookup

    // Mixin Custom Script into Controller.
    if (userService.hasCustomScript($scope.user)) {
        angular.extend(this, new CustomUserController($scope));
    }
}

至于您的具体示例，将任意字段插入表单的一种方法是动态构建它。我使用可能适合您情况的架构表单指令。给定定义模型属性的模式，以及指定项的包含顺序的数组，该指令布置表单。

例如（另请参阅此working plunker, incl. add'l features）：

<form class="form-inline" name="form" novalidate role="form">
    <div class="row-fluid clearfix">
        <h2>Sample Form</h2>
    </div>
    <div class="row-fluid clearfix">
        <hr> 
        <div class="span12">
            <fieldset class="span6">
                <schema-form-fields
                    fields="side1Fields"
                    model="model"
                    schema="modelSchema"
                    data="requestResult"
                    schema-list="schema">
                </schema-form-fields>
            </fieldset>
            <fieldset class="span6">
                <schema-form-fields
                    fields="side2Fields"
                    model="model"
                    schema="modelSchema"
                    data="requestResult"
                    schema-list="schema">
                </schema-form-fields>
            </fieldset>
        </div>
    </div>
    <div class="row-fluid clearfix">
        <button
            class="btn btn-primary span2 offset10"
            type="submit">
            Submit
        </button>
    </div>
</form>

// example controller with dynamic form
app.controller('HomeCtrl', ['$scope', 'schema', 'requestResult', 'dataService',
    function($scope, schema, requestResult, dataService) {

        $scope.modelSchema = schema.product;          
        $scope.model = {
            factoryDate: '20160506'
        };

        // field name arrays - one array per column in sample layout
        // insert elements into these and form should re-render
        // may require explicit watch to trigger update
        $scope.side1Fields = [
            'productName',
            'factoryDate'
        ];

        $scope.side2Fields = [
            'productType',
            'timeValue'
        ];  

        // ....  other controller code    
    }
]);

// example schema
app.value('schema', {
    "product": {
        "type": "object",
        "title": "Product Schema",
        "properties": {
            "productType": {
                "type": "string",
                "title": "Product Type",
                "showLabel": true,
                "tooltip": "Product classification",
                "readonly": false,
                "required": true,
                "class": "custom-select",
                "enum": ['Bike', 'Car', 'Airplane', 'Glider', 'Stilts']
            },
            "productName": {
                "title": "Product Name",
                "showLabel": true,
                "type": "string",
                "tooltip": "A more descriptive name for the modeled structure.",
                "readonly": false,
                "required": true
            },
            "factoryDate": {
                "title": "Factory Date",
                "type": "string",
                "showLabel": true,
                "control": "date",
                "dateFormat": "yyyymmdd",  // TODO format as provided 
                "tooltip": "Date of manufacture.",
                "dateOptions": {
                    autoclose: true
                },
                "readonly": false,
                "required": true
            },
            "timeValue": {
                "title": "Time (HHMM)",
                "showLabel": true,
                "type": "string",
                "pattern": "([0-1]{1}[0-9]{1}|20|21|22|23)[0-5]{1}[0-9]{1}",
                "timeFormat": "hhmm",  // TODO format as provided 
                "tooltip": "Time entry.",
                "readonly": false,
                "required": true,
            }
        }
    }
});

AngularJS中的动态表单

解

1 个答案: