我尝试动态添加一个所见即所得的textAngular，但是当我单击“添加描述”按钮时，无法单击第二个文本区域(带有textAngular的所见即所得)
index.html
<div id="product-{{ product.country.code }}" class="app-product" ng-repeat="product in products">
<div class="form-group" ng-repeat="description in product.description">
<label class="col-lg-2 control-label">Description {{ $index + 1 }}</label>
<div class="col-lg-8">
<text-angular ta-toolbar="toolbarProductTextAngular" name="product-{{ product.country.code }}-description-{{ $index + 1 }}" ng-model="description.description" placeholder="Enter description {{ $index + 1 }}" ng-required="$index > 0" ></text-angular>
</div>
<div class="col-lg-2">
<button type="button" class="btn btn-danger pull-right">
<i class="glyphicons glyphicons-remove-2"></i> Remove description
</button>
</div>
</div>
<div class="form-group">
<div class="col-lg-4 col-lg-offset-8">
<div class="btn-group pull-right">
<button type="button" class="btn btn-success" ng-click="addDescription(product)">
<i class="glyphicons glyphicons-plus"></i> Add description
</button>
<button type="button" class="btn btn-danger">
<i class="glyphicons glyphicons-remove-2"></i> Remove
</button>
<button type="button" class="btn btn-primary">
<i class="glyphicons glyphicons-new-window"></i> Clone
</button>
</div>
</div>
</div>
</div>
我的工具栏
$rootScope.toolbarProductTextAngular = [['bold','italics','underline', 'insertLink', 'html'],['wordcount','charcount']];
当我单击“添加描述”时，按一下就可以了，但是我想知道为什么禁用了textarea和工具栏？我无法点击此...
描述2生成的代码
<div class="form-group ng-scope" ng-repeat="description in product.description">
<label class="col-lg-2 control-label ng-binding">Description 2</label>
<div class="col-lg-8">
<text-angular ta-toolbar="toolbarCampaignTextAngular" name="product-au-description-2" ng-model="description.description" placeholder="Enter description 2" ng-required="$index > 0" class="ng-pristine ng-untouched ng-isolate-scope ta-root ng-empty ng-invalid ng-invalid-required" required="required">
<div text-angular-toolbar="" name="textAngularToolbar4837089965543664" ta-toolbar="toolbarCampaignTextAngular" class="ng-scope ng-isolate-scope ta-toolbar btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default ng-scope" name="bold" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Bold" unselectable="on" disabled="disabled"><i class="glyphicons glyphicons-bold"></i></button><button type="button" class="btn btn-default ng-scope" name="italics" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Italic" unselectable="on" disabled="disabled"><i class="glyphicons glyphicons-italic"></i></button><button type="button" class="btn btn-default ng-scope" name="underline" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Underline" unselectable="on" disabled="disabled"><i class="glyphicons glyphicons-text-underline"></i></button><button type="button" class="btn btn-default ng-scope" name="insertLink" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Insert / edit link" unselectable="on" disabled="disabled"><i class="glyphicons glyphicons-link"></i></button><button type="button" class="btn btn-default ng-scope" name="html" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Toggle html / Rich Text" unselectable="on" disabled="disabled"><i class="glyphicons glyphicons-embed-close"></i></button></div>
<div class="btn-group">
<div id="toolbarWC" style="display:block; min-width:100px;" class="btn btn-default ng-scope" name="wordcount" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" unselectable="on" disabled="disabled">Words: <span ng-bind="wordcount" class="ng-binding">0</span></div>
<div id="toolbarCC" style="display:block; min-width:120px;" class="btn btn-default ng-scope" name="charcount" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" unselectable="on" disabled="disabled">Characters: <span ng-bind="charcount" class="ng-binding">0</span></div>
</div>
</div>
<div class="ta-scroll-window ng-scope ta-text ta-editor form-control" ng-hide="showHtml">
<div class="popover fade bottom" style="max-width: none; width: 305px;">
<div class="arproduct"></div>
<div class="popover-content"></div>
</div>
<div class="ta-resizer-handle-overlay">
<div class="ta-resizer-handle-background"></div>
<div class="ta-resizer-handle-corner ta-resizer-handle-corner-tl"></div>
<div class="ta-resizer-handle-corner ta-resizer-handle-corner-tr"></div>
<div class="ta-resizer-handle-corner ta-resizer-handle-corner-bl"></div>
<div class="ta-resizer-handle-corner ta-resizer-handle-corner-br"></div>
<div class="ta-resizer-handle-info"></div>
</div>
<div id="taTextElement4837089965543664" contenteditable="true" ta-bind="ta-bind" ng-model="html" placeholder="Enter description 2" class="ng-pristine ng-untouched ng-valid ta-bind ng-empty placeholder-text">
<p><br></p>
</div>
</div>
<textarea id="taHtmlElement4837089965543664" ng-show="showHtml" ta-bind="ta-bind" ng-model="html" placeholder="Enter description 2" class="ng-pristine ng-untouched ng-valid ng-scope ta-bind ta-html ta-editor form-control ng-empty ng-hide"></textarea>
<input type="hidden" tabindex="-1" style="display: none;" name="product-au-description-2" value="">
</text-angular>
</div>
<div class="col-lg-2">
<button type="button" class="btn btn-danger pull-right">
<i class="glyphicons glyphicons-remove-2"></i> Remove description
</button>
</div>
</div>
最佳答案
正如我报告的here一样，placeholder HTML属性破坏了所见即所得。您必须删除它。
关于javascript - 使用textAngular动态添加所见即所得，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36699026/