Hello

Question

我试图从inputbox获取值，然后动态地将该值作为html元素附加到DOM中，但ng-model将其作为字符串附加。

例如，

<p> para </p>

这应该作为HTML元素追加而不是字符串。

**注意::我尝试使用ng-model但它呈现为一个字符串，因此我没有看到任何h1元素标签，而是我看到的是完整的＆＃34;

Hello

＆＃34;

小提琴:: **

http://jsfiddle.net/simmi_simmi987/Z9vN8/

代码::

   <h1>Comment Box</h1>

   <div class="col-md-6 col-md-offset-3">
    <div class="well well-sm">
      <form class="form-horizontal" action="" method="post">
      <fieldset>
        <legend class="text-center">Style Title Bar </legend>

        <!-- Height input-->
        <div class="form-group">
          <label class="col-md-3 control-label" for="name">Title-Bar Height</label>
          <div class="col-md-9">
            <input type="text" placeholder="Title-Bar Height" class="form-control" ng-model="title_height">
          </div>
        </div>

        <!-- Color input-->
        <div class="form-group">
          <label class="col-md-3 control-label" for="email">Title-Bar Color</label>
          <div class="col-md-9">
            <input type="text" placeholder="Title-Bar Color" class="form-control" ng-model="title_bgcolor">
          </div>
        </div>

         <legend class="text-center">Style Box :</legend>

        <!-- Message body -->
        <div class="form-group">
          <label class="col-md-3 control-label" for="message">Your comment</label>
          <div class="col-md-9">
            <textarea class="form-control" ng-model="dynamic_comment" name="message" placeholder="Please enter your comment here..." rows="5"></textarea>
          </div>
        </div>

        <!-- Height input-->
        <div class="form-group">
          <label class="col-md-3 control-label" for="name">Box Height</label>
          <div class="col-md-9">
            <input type="text" placeholder="Box Height" class="form-control" ng-model="box_height">
          </div>
        </div>

        <!-- Color input-->
        <div class="form-group">
          <label class="col-md-3 control-label" for="email">Box Color</label>
          <div class="col-md-9">
            <input type="text" placeholder="Box Color" class="form-control" ng-model="box_bgcolor">
          </div>
        </div>

        <!-- Form actions -->
        <div class="form-group">
          <div class="col-md-12 text-right">
            <button type="submit" class="btn btn-primary btn-lg">Submit</button>
          </div>
        </div>
      </fieldset>
      </form>
    </div>
  </div>


    <div class="col-md-offset-3 col-md-7">
     <div class="panel panel-default">
        <div class="panel-heading"  ng-style="{height:title_height,backgroundColor:title_bgcolor}">
          <h3 class="panel-title">Panel title</h3>
        </div>

        <div class="panel-body"  ng-style="{height:box_height,backgroundColor:box_bgcolor}">
          Reading Comment  ::<br/>
          {{dynamic_comment}}
        </div>
    </div>


  </div>



  </div><!-- row closed -->
</div> <!-- Container closed  -->

Answer 1

您需要添加ngSanitize（位于angular-sanitize.js），然后使用ng-bind-html，如下：

<span ng-bind-html="dynamic_comment"></span>

清洁剂将禁止某些元素，并在您输入时抱怨，并且HTML内容不完整（例如，未关闭的标签）。你必须以某种方式处理这个问题。

另请查看ngBindHtml和相关的SCE文档。

请参阅分叉小提琴：http://jsfiddle.net/vH447/（并检查包含angular-sanitize.js的外部资源）。

ng-model将dom中的元素追加为字符串

Hello

1 个答案: