Javascript 使用textAngular动态添加所见即所得

我尝试动态添加所见即所得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>

当我点击“添加描述”按钮时，按钮就可以了，但是我想知道为什么文本区域和工具栏被禁用了？我不能点击这个

说明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>

说明2
字：0
字符：0


删除描述

我没看到占位符

我无法单击文本区域（禁用）

---

正如我所报告的，

占位符

HTML属性打破了所见即所得。您必须将其删除。

单击按钮时，显示生成附加文本部分的代码会很有帮助

<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>