Fatal编程技术网
  • angularjs/
  • Angularjs nicEdit不'；不能在模板中工作

Angularjs nicEdit不'；不能在模板中工作

angularjs templates

Angularjs nicEdit不'；不能在模板中工作,angularjs,templates,nicedit,Angularjs,Templates,Nicedit,我正在尝试将wysiwyg nicEdit文本编辑器添加到我的文本区域。当我转到实际的templateUrl时，文本框和工具栏可以工作，但它们不能正确提交（到我的firebase db）。当我转到要呈现模板的页面时，我无法获得nicEdit工具栏功能，只能获得一个常规文本区域框。我使用的是angularjs，模板URL为addPost.html 因此，当我转到#/addPost时，模板确实会呈现，但不使用有效的nicEdit功能，但直接转到模板url addPost.html时，确实可以使用ni

我正在尝试将wysiwyg nicEdit文本编辑器添加到我的文本区域。当我转到实际的templateUrl时，文本框和工具栏可以工作，但它们不能正确提交（到我的firebase db）。当我转到要呈现模板的页面时，我无法获得nicEdit工具栏功能，只能获得一个常规文本区域框。我使用的是angularjs，模板URL为addPost.html

因此，当我转到#/addPost时，模板确实会呈现，但不使用有效的nicEdit功能，但直接转到模板url addPost.html时，确实可以使用nicEdit功能，但不会提交到我的firebase db。有人知道为什么会这样吗？谢谢

模板文件addPost.html：

         <head>
         <script type="text/javascript" language="javascript" src="../nicEdit.js"></script>
         <script type="text/javascript" language="javascript">
         bkLib.onDomLoaded(nicEditors.allTextAreas);
         </script>
      <!-- Bootstrap core CSS -->
      <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
     <nav class="blog-nav">
     <a class="blog-nav-item " href="#/welcome">Home</a>
     <a class="blog-nav-item active" href="#/addPost">Add Post</a>
     <a class="blog-nav-item " style="cursor:pointer;" ng-click="logout();">Logout</a>
     </nav>

    </head>
   <body ng-controller="AddPostCtrl">

  <div class="container" >

  <form class="form-horizontal" ng-submit="AddPost()">
  <fieldset>
   <!-- Form Name -->
    <legend>Create Post</legend>

       <!-- Textarea -->
       <div class="form-group">
    <label class="col-md-4 control-label" for="txtPost">Post</label>
    <div class="col-md-4">                     
<textarea class="form-control" id="txtPost" ng-model="article.post" name="txtPost" ></textarea>
   </div>
   </div>
 </fieldset>
  </form>
   </div><!-- /.container -->
   </body>
转到#addPost显示未运行nicEdit的模板

但是转到实际的templateUrl addPost.html，除了不能提交之外，它工作得很好

问题与试图运行脚本和html部分有关。简单的解决方案是将所需的脚本移动到主索引文件的头上，在
ng view
之外，尽管从技术上看（根据其他stackoverflow帖子），可能会尝试执行这些脚本：

“AngularJS：如何在ng include中创建角度加载脚本？”

（另外，您的头文件中有html，不太可能呈现：
）

我也遇到了同样的问题，在模板中初始化NicEdit。 首先，我使用了ondomload（）else，但最好等待文档。对于jQuery，我使用document.ready

看这里,

问题是告诉NicEditor新的文本区域。 下面是在jQuery中执行此操作的代码示例

var idnr = 0;
var NicEditor = new nicEditor();

$('#add').click(function(){
   var $clone = $('#dummy').clone();
   var id = 't_' + idnr;
   idnr = idnr + 1;
   $clone.attr('id',id).attr('name',id).removeClass('dummy');
   $('#wrapper').append($clone);
   NicEditor.panelInstance(id);
   $(nicEditors.findEditor(id).elm).focus();
});
并且是动态NicEdit使用的一个工作示例。

尝试将脚本文件移动到ng视图之外的主索引文件的头部，但仍然无法将NicEdit功能呈现到模板上的文本区域。不过，我没有使用ng include添加模板，只是使用.config重定向路由。不过，nav类html确实在模板中呈现。很抱歉，这是一个新问题，但我认为我可以通过使用ng include根据您提供的链接中的信息渲染部分来解决这个问题。谢谢。用ckeditor而不是nicedit再次尝试此操作，效果良好。谢谢 
var idnr = 0;
var NicEditor = new nicEditor();

$('#add').click(function(){
   var $clone = $('#dummy').clone();
   var id = 't_' + idnr;
   idnr = idnr + 1;
   $clone.attr('id',id).attr('name',id).removeClass('dummy');
   $('#wrapper').append($clone);
   NicEditor.panelInstance(id);
   $(nicEditors.findEditor(id).elm).focus();
});