nicEdit 在模板中不起作用

Question

我正在尝试将所见即所得的 nicEdit 文本编辑器添加到我的文本区域。当我转到实际的 templateUrl 时，文本框和工具栏可以正常工作，但它们没有正确提交（到我的 firebase 数据库）。当我转到要呈现模板的页面时，我无法获得 nicEdit 工具栏功能，只能获得常规文本区域框。我正在使用 angularjs 并将模板 url 作为 addPost.html。

因此，当我转到#/addPost 时，模板再次呈现，但没有使用有效的 nicEdit 功能，但直接转到模板 url addPost.html 确实具有 nicEdit 功能，但后来赢了'提交到我的 firebase 数据库。任何人都知道为什么会这样？谢谢。

模板文件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.js

      'use strict';

     angular.module('myApp.addPost', ['ngRoute'])

      .config(['$routeProvider', function($routeProvider) {
      $routeProvider.when('/addPost', {
       templateUrl: 'addPost/addPost.html',
       controller: 'AddPostCtrl'
    });
   }])

    .controller('AddPostCtrl', ['$scope','$firebase','$location','CommonProp',function($scope,$firebase,      $location,CommonProp) {
    if(!CommonProp.getUser()){
    $location.path('/main');
  }

    $scope.logout = function(){
    CommonProp.logoutUser();
 }

    $scope.AddPost = function(){
     var title = $scope.article.title;
     var date = $scope.article.date;

      var post = $scope.article.post;

      var firebaseObj = new Firebase("http://..");
      var fb = $firebase(firebaseObj);

    fb.$push({ title: title, date: date, post: post,emailId:       CommonProp.getUser() }).then(function(ref) {
      console.log(ref); 
     $location.path('/welcome');
  }, function(error) {
    console.log("Error:", error);
  });

  }
  }]);

转到#addPost 显示模板没有 nicEdit 工作

但是转到实际的 templateUrl addPost.html 它工作正常，减去无法提交

Answer 1

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

"AngularJS: How to make angular load script inside ng-include?"

（此外，您的头文件中有 html 不太可能被渲染：<nav class="blog-nav">）

Answer 2

好吧，我遇到了同样的问题，在模板中初始化 NicEdit。首先我用的是onDomLoaded() else，不过还是等文件好。对于 jQuery 我使用 document.ready.

看这里，pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

问题是告诉NicEditor新的textarea。这是在 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();
});

并且here是动态NicEdit使用的工作示例。

nicEdit 在模板中不起作用

nicEdit doesn't work in templates

templates

nicedit

angularjs