How to hide element with AngularJS based on DOM element - html

Question

I have an Umbraco setup. And when I edit in the CMS I would like for the "Preview" button to disappear whenever there is not a text-editor present in the DOM.
Angular file in localtion 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>
Return to list
<!-- 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">
{{ancestor.name}}
</li>
<li></li>
</ul>
</umb-panel>
</form>
I am not certain this is the correct file - but it seems to be the place where the Preview button is created.
The question now is. Can I somehow determine with angular if the text editor is active and then if it is, show the Preview button next to the Save and publish?

Answer 1

I would suggest the following
1) Determine what properties are accessible on the object that is passed through to the <umb-editor> directive.
Digging into the code I can see things like it has a .view property. You could inspect this at runtime in the browser console to see what additional properties are available
2) You can write a rule on the button to show if the collection of fields contains one with a certain property you might have identified
something like this...
Hope this helps

Answer 2

I found a second solution I might as well add here. I used the Umbraco Plugin Backoffice Tweaking.
Here I added this to my Config\BackofficeTweaking.config file
<?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>
Here you can also make some scripting or do many other things. The plugin also has a visual editor for Umbraco. Pretty easy to use.