Запустить ng-init вручную

У меня есть профиль с серией карт. Каждая карта имеет тип (например, карта галереи, карта котировок и т. Д.), И в профиле может быть 1 или более каждого типа. Я строю редактор профиля и хочу иметь возможность открывать форму редактирования в модальном режиме. Каждая карта имеет свой собственный тип формы с уникальными входными данными, но для каждого типа карт существует только одна форма, так как мы не можем заранее знать, сколько карт каждого типа будет иметь профиль.

Для каждой формы у меня есть ряд ng-init директивы для предварительного заполнения формы редактирования атрибутами текущей модели. Это прекрасно работает, за исключением того, что если у меня более одной карты одного типа, форма редактирования каждой карты будет содержать данные из последней карты в наборе. Есть ли способ, которым я могу вызвать ng-init директивы для запуска снова, когда я открываю форму (например, с ng-click) чтобы пользователь всегда видел атрибуты текущей модели?

Вот как выглядит одна из моих карточных форм:

<% if c.class.name == 'QuoteCard' %>
<div class="row-scrollable" ng-show="view === 'quote-card'">
    <div class="col-lg-12">
        <form accept-charset="UTF-8" name="editQuoteCardForm" ng-submit="update({card: editQuoteCard, type: 'quote_card'})" novalidate>
            <input name="utf8" type="hidden" value="✓">
            <input name="authenticity_token" type="hidden" ng-model="editQuoteCard.token" ng-init="editQuoteCard.token='<%= form_authenticity_token %>'">
            <input name="id" type="hidden" ng-model="editQuoteCard.id" ng-init="editQuoteCard.id='<%= c.id %>'">

            <div class="form-group">
                <label>Title</label>
                <br style="clear:both;" />
                <input type="text" class="form-control" name="title" ng-init='editQuoteCard.title = "<%= c.title %>"' ng-model="editQuoteCard.title" required>
            </div>

            <div class="form-group">
                <label>Attribution</label>
                <br style="clear:both;" />
                <input type="text" class="form-control" name="attribution" ng-init='editQuoteCard.title = "<%= c.attribution %>"' ng-model="editQuoteCard.attribution">
            </div>

            <div class="form-group">
                <label>Quote</label>
                <br style="clear:both;" />
                <textarea rows="3" class="form-control" name="quote" ng-init='editQuoteCard.title = "<%= c.quote %>"' ng-model="editQuoteCard.quote" required></textarea>
            </div>

            <div class="form-group">
                <label>Media</label>
                <br style="clear:both;" />
                <input type="hidden" class="form-control" name="photo" ng-model="editQuoteCard.image">
                <input type="hidden" class="form-control" name="video" ng-model="editQuoteCard.video">
                <%= photo = Photo.find_by(quote_card_id: c.id) %>
                <%= video = Video.find_by(quote_card_id: c.id) %>
                <div class="profile-builder attachment"
                    ng-init='<%= "editQuoteCard.image = #{{ image_url: photo.image.url, id: photo.id }.to_json}" unless photo.nil? %>'
                    ng-init='<%= "editQuoteCard.video = #{{ media_url: video.media_url, media_type: video.media_type, id: video.id }.to_json}" unless video.nil? %>'>
                    <div ng-show="editQuoteCard.video" class="content video-content result iframe">
                        <div class="caption delete-btn" ng-click="editQuoteCard.video = undefined;">
                            <i class="fa fa-times"></i>
                        </div>
                        <iframe ng-if="editQuoteCard.video.media_type === 'Youtube'" ng-src="{{editQuoteCard.video.media_url + '?showinfo=0&autohide=1' | trustAsResourceUrl}}" frameborder="0" id="ytplayer" type="text/html"></iframe>
                        <iframe ng-if="editQuoteCard.video.media_type === 'Vimeo'" ng-src="{{editQuoteCard.video.media_url + '?badge=0&byline=0&title=0' | trustAsResourceUrl}}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                    </div>
                    <div ng-show="editQuoteCard.image" class="content result">
                        <div class="delete-btn" ng-click="editQuoteCard.image = undefined;">
                            <i class="fa fa-times"></i>
                        </div>

                        <div class="image-container" ng-style="{'background-image': 'url(' + editQuoteCard.image.image_url + ')'}"></div>
                    </div>
                </div>
            </div>
            <br style="clear:both;" />

            <div class="form-group">
                <input class="btn btn-primary" style="float:right;" name="commit" type="submit" value="Update Card" ng-disabled="editQuoteCardForm.$invalid">
                <div class="btn btn-default" style="float:right;margin-right:10px;" ng-click="openMediaBrowser({type: '<%= c.class %>', id: <%= c.id %>, index: <%= i %>});" ng-show="!editQuoteCard.image && !editQuoteCard.video">Add Media</div>
            </div>
        </form>
    </div>
</div>
<% end %>

И в моем контроллере у меня есть edit функция, которая открывает модал с правильной формой:

$scope.edit = function(options) {
    modal.open({
        content: $('#edit_card_' + options.index + '_form'),
        elem: $('#edit_card_' + options.index + '_form_container')
    })
};

0 ответов

Другие вопросы по тегам