文章/答案/技术大牛

发布

问Summernote插入动态HTML
EN

Stack Overflow用户

提问于 2016-11-22 14:04:55

回答 1查看 4.8K关注 0票数 0

我有一个名为$scope.selectedTemplate的变量。这个变量包含HTML文本，本质上是从一个充满了这个“内容”文本的对象的选择列表中提取出来的。

然后，我试图使用一个函数将内容传递给我的summernote编辑器，该函数在第一次执行时起作用，但在更改selectedTemplate变量时不起作用。当我在HTML元素中使用相同的函数(带有ng-bind)时，将显示动态selectedTemplate内容。

这样做是可行的：

<div class="shown">
    <p id="templateshow" ng-bind-html="SkipValidation(selectedTemplate)"></p>
</div>

这并不是：

<div class="editor">
    <textarea class="form-control html-editor" id="templatecontent" name="content" ng-bind-html="SkipValidation(selectedTemplate)"  style="resize:none;"></textarea>
</div>

AngularJS:

 $scope.SkipValidation = function (value) {
    var decoded = $("<p/>").html(value).text();
    return $sce.trustAsHtml(decoded);
};

摘要

我如何使用ng-bind和SkipValidation方法动态地更改我的Summernote编辑器的HTML格式的内容？

更新1:

试图使用手表处理selectedTemplate的更改使用以下代码：

$scope.$watch('selectedTemplate', function() {
    if($scope.selectedTemplate != ""){
       $("#templatecontent").summernote('code',"<b>Hello</b>");    
    }
});

但是，这是手动和静态文本，它输出Hello。

不幸的是，使用此代码不起作用：

$scope.$watch('selectedTemplate', function() {
    if($scope.selectedTemplate != ""){
        $("#templatecontent").summernote('code',$scope.SkipValidation($scope.selectedTemplate));    
    }
});

jquery

html

angularjs

summernote

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-11-22 14:13:58

angular.module('app', [])

.controller('ctrl', ['$scope',
  function($scope) {
    $scope.sourceCodes = [
      {name: 'template 1', code: '<p>template 1<br></p>'},
      {name: 'template 2', code: '<p>template 2<br></p>'},
    ];
    
    $scope.$watch('selectedTemplate', function(n, o){
      if(n < 0 || n == undefined) return;
      $('#summernote').summernote('destroy');
      $('#summernote')
        .val($scope.sourceCodes[n].code)
        .summernote();
    })
      
    $('#summernote').summernote();
  }
])

select {
  margin: 30px !important;
  display: block;
}

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <!-- include libraries(jQuery, bootstrap) -->
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

  <!-- include summernote css/js-->
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
</head>

<body ng-controller="ctrl">
  <select ng-model="selectedTemplate">
    <option value="-1">Please Selecte Template</option>
    <option ng-repeat="code in sourceCodes" value="{{ $index }}">{{ code.name }}
      <option>
  </select>

  <textarea id="summernote" name=""></textarea>
</body>

</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40743949

复制

相似问题

问Summernote插入动态HTML
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Summernote插入动态HTMLEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Summernote插入动态HTML
EN