Как скрыть элемент с Angular на основе элемента DOM

Question

У меня есть настройки Umbraco. И когда я редактирую в CMS, я бы хотел, чтобы кнопка «Предварительный просмотр» исчезала, когда в DOM нет текстового редактора.

Angular файл в локальной папке Umbraco/Views/content/edit.html

<form novalidate name="contentForm"
    ng-controller="Umbraco.Editors.Content.EditController"
    ng-show="loaded"
    ng-submit="save()"
    val-form-manager>

    <umb-panel umb-tabs ng-class="{'editor-breadcrumb': ancestors && ancestors.length > 0}">
        <umb-header tabs="content.tabs">

            <div class="span7">
                <umb-content-name placeholder="@placeholders_entername"
                                  ng-model="content.name" />
            </div>

            <div class="span5">
                <div class="btn-toolbar pull-right umb-btn-toolbar">
                    <div class="btn-group" ng-animate="'fade'" ng-show="formStatus">
                        <p class="btn btn-link umb-status-label">{{formStatus}}</p>
                    </div>

                    <umb-options-menu ng-show="currentNode"
                                      current-node="currentNode"
                                      current-section="{{currentSection}}"> 
                    </umb-options-menu>

                </div>
            </div>
        </umb-header>

        <umb-tab-view>
            <umb-tab id="tab{{tab.id}}" rel="{{tab.id}}" ng-repeat="tab in content.tabs">
                <div class="umb-pane">
                    <umb-property property="property"
                                  ng-repeat="property in tab.properties">
                        <umb-editor model="property"></umb-editor>
                    </umb-property>


                    <div class="umb-tab-buttons" detect-fold ng-class="{'umb-dimmed': busy}">

                        <div class="btn-group" ng-show="listViewPath">
                            <a class="btn" href="#{{listViewPath}}">
                                <localize key="buttons_returnToList">Return to list</localize>
                            </a>
                        </div>

                        <div class="btn-group" ng-show="!isNew">
                            <a class="btn" ng-click="preview(content)">
                                <localize key="buttons_showPage">Preview page</localize>
                            </a>
                        </div>

                        <div class="btn-group dropup" ng-if="defaultButton">
                            <!-- primary button -->
                            <a class="btn btn-success" href="#" ng-click="performAction(defaultButton)" prevent-default>
                                <localize key="{{defaultButton.labelKey}}">{{defaultButton.labelKey}}</localize>
                            </a>

                            <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" ng-if="subButtons.length > 0">
                                <span class="caret"></span>
                            </a>

                            <a href="#">Return to list</a>

                            <!-- sub buttons -->
                            <ul class="dropdown-menu bottom-up" role="menu" aria-labelledby="dLabel" ng-if="subButtons.length > 0">
                                <li ng-repeat="btn in subButtons">
                                    <a href="#" ng-click="performAction(btn)" prevent-default>
                                        <localize key="{{btn.labelKey}}">{{btn.labelKey}}</localize>
                                    </a>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </umb-tab>
        </umb-tab-view>


        <ul class="umb-panel-footer-nav nav nav-pills" ng-if="ancestors && ancestors.length > 0">
            <li ng-repeat="ancestor in ancestors">
                <a href="#/content/content/edit/{{ancestor.id}}">{{ancestor.name}}</a>
            </li>
            <li></li>
        </ul>

    </umb-panel>
</form>

Я не уверен, что это правильный файл - но, похоже, это место, где создается кнопка Preview.

Вопрос сейчас. Можно ли как-то с помощью angular определить, активен ли текстовый редактор, а затем, если он есть, показать кнопку Preview рядом с Save and publish?

Answer 1

Я бы предложил следующее

1) Определить, какие свойства доступны для объекта, который передается директиве <umb-editor>.

Копаясь в коде, я вижу, что у него есть свойство .view. Вы можете проверить это во время выполнения в консоли браузера, чтобы увидеть, какие дополнительные свойства доступны

2) Вы можете написать правило для кнопки, чтобы показать если коллекция полей содержит поле с определенным свойством, которое вы могли бы определить

что-то вроде этого ...

Надеюсь, что это помогает

Answer 2

Я нашел второе решение, которое я мог бы также добавить сюда. Я использовал Umbraco Plugin Backoffice Tweaking .

Здесь я добавил это в мой Config\BackofficeTweaking.config файл

<?xml version="1.0" encoding="utf-8"?>
<Config>
  <Rules>
    <Rule Type="HideButtons" Enabled="true" Names="preview" Users="" UserTypes="" ContentTypes="Omraader,Grund,Udstykning,Indstillinger,Niveau,Oversigt_Mappe,Oversigt,Information_Mappe,Information,Afstande_Mappe,Afstande" Description="" />
  </Rules>
  <Scripts>
    <Script Name="example"></Script>
  </Scripts>
</Config>

Здесь вы также можете сделать некоторые сценарии или сделать много других вещей. Плагин также имеет визуальный редактор для Umbraco. Довольно прост в использовании.