Question

我有<superhero>指令，它有两个指令

网络按钮以获取表单验证并发布更新后的内容 ngModel值到相应的控制器
fieldMap 指令，用于按照我们从各个控制器传递的对象生成动态字段

以下是我工作的example

名为 saveFormFn 的

指令属性将告诉按钮使用输入属性指令调用要调用的函数。

例如。点击“保存”按钮后，它将调用“ Ctrl1saveFormFn ＆＃39;”功能。来自控制器 Ctrl1 。此函数将生成ajax帖子以保存表单字段。

使用某些内容更新文本字段并单击“保存”后，我已将指令的当前范围传递给相应的控制器（请参阅控制台日志）。我无法从当前范围获取更新的 fielddata 值。

$scope.Ctrl1saveFormFn = function(item){
        _.each(item,function(currentScope){
            console.log(currentScope)
            // here i want to collect the form data with updated fielddata values
        })
    }

我是初学者。我在正确的道路上？请建议

Answer 1

我重新编写了你的代码，因为它很难理解。

我会这样做：

使用ng-include加载按钮模板。这是加载控制按钮edit和save。
将数据保存在superhero指令中的变量中。也许将它存储在一个单独的服务/工厂中会更好。
创建一个指令customForm，该指令将根据您传递给其范围的提供的模型创建表单。
主要的应用程序逻辑位于superhero指令中，因为它正在向DOM添加控件save / edit。如果保存/编辑不仅与superhero相关，最好在主控制器中执行。

请查看下面的演示或此jsfiddle。

angular.module('demoApp', [])
    .directive('superhero', Superhero)
    .directive('customForm', CustomForm)
    .controller('mainController', MainController);

function Superhero() {
    return {
        restrict: 'E',
        scope: {
            formModel: "=",
        },
        template: '<div class="hero"><div ng-include="\'web-buttons.html\'"></div><custom-form model="formModel"></custom-form></div>',
        controllerAs: 'superHeroCtrl',
        controller: function ($scope) {
            var self = this;
            console.log('controller directive');
            angular.extend(this, {
                abilities: [],
                editMode: false,
                
                addStrength: function (data) {
                    self.abilities.push(data);
                },
                getStrength: function () {
                    return self.abilities;
                },
                showSave: function() {
                    self.editMode = true;
                    $scope.formModel.editMode = true;
                },
                hideSave: function() {
                    self.editMode = false;
                    $scope.formModel.editMode = false;
                },
                save: function() {
                    self.addStrength('can fly');
                    console.log(self.getStrength());
                    console.log('saving data now of form now...', $scope.formModel.data);
                    alert('saving data of form now: ' + self.getStrength()[0] + ' - ' + JSON.stringify( $scope.formModel.data, null, 2));
                    self.hideSave();
                }
            });
        }
    }
}

function CustomForm() {
    return {
        restrict: 'EA',
        scope: {
            model: '='
        },
        template: '<div ng-if="model.editMode" ng-repeat="formElement in model.fields" ng-include="formElement.template.url"></div>'
    }
}

function MainController() {
    this.normalForm = {
        editMode: false,
        data: {
        },
        fields: {
            'NAME':{
                template: {
                    url: 'customForms/text.html',
                    type: 'edit' // not sure for what it is needed
                },
                label: 'First name',
                id: "NAME",
                placeholder : "First Name",
                fieldData: "NAME",
                key : 'first_name'
            },
            'LNAME': {
                template: {
                    url: 'customForms/text.html',
                    type: 'edit' // not sure for what it is needed
                },
                label: "Last Name",
                placeholder : "Last Name",
                id: "LNAME",
                key : 'last_name'
            }
        }
    };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController as mainCtrl">
    <script type="text/ng-template" id="customForms/text.html">
        <label for="{{formElement.id}}">{{formElement.label}}</label>
        <input ng-model="model.data[formElement.key]" placeholder="{{formElement.placeholder}}" id="formElement.id"/>
    </script>
    
    <script type="text/ng-template" id="web-buttons.html">
        <button ng-click="superHeroCtrl.showSave()" ng-if="!superHeroCtrl.editMode">edit</button>
        <button ng-if="superHeroCtrl.editMode" ng-click="superHeroCtrl.save()">save</button>
    </script>
    
    <superhero form-model="mainCtrl.normalForm"></superhero>
    <h3>debug output:</h3>
    <pre>
    {{mainCtrl.normalForm |json}}
    </pre>
</div>

Angular Directive Element动态模板字段及其来自控制器的更新模型值？

1 个答案: