Угловой элемент директивы динамический Шаблон с его обновленным значением модели из контроллера?

Question

Угловой элемент директивы динамический Шаблон с его обновленным значением модели из контроллера?

0

У меня есть директива <superhero> которая имеет две директивы

веб-кнопки для проверки формы и опубликовать обновленное значение ngModel соответствующему контроллеру
директива fieldMap для генерации динамических полей по объекту, который мы переходим от соответствующего контроллера

Вот пример, который я сработал

директива, называемая saveFormFn, сообщит кнопке, чтобы вызвать, какую функцию вызывать, используя директиву атрибута ввода.

Например. После нажатия кнопки "Сохранить" он вызовет функцию " Ctrl1saveFormFn " из контроллера Ctrl1. Эта функция сделает сообщение ajax для сохранения полей формы.

После обновления текстовых полей некоторым содержимым и нажмите "Сохранить", я передал текущую область действия директива соответствующему контроллеру (см. журнал консоли). я не смог получить обновленное значение fielddata из текущего Scope.

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

Я начинаю. Я на правильном пути? Пожалуйста посоветуй

mymotherland 02 июль 2015, в 19:06

Источник

Теги:

javascript

jquery

angularjs

1 ответ

Ещё вопросы

AWolf · Answer 1 · 2015-07-02T18-54-00.000Z

Я переписал ваш код, потому что это было довольно трудно понять.

Я бы сделал это так:

Используйте ng-include для загрузки шаблона ваших кнопок. Эта загрузка кнопок управления edit и save.
Сохраните данные в переменной в директиве superhero. Возможно, было бы лучше сохранить его на отдельной службе/фабрике.
Создайте директиву customForm, которая создаст форму на основе поставляемой модели, которую вы переходите в ее область.
Основная логика приложения находится в директиве superhero поскольку она добавляет элементы управления save/edit в DOM. Если сохранение/редактирование связано не только с 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>

Благодарю. Возьми меня взглянуть на это