nicEdit在模板中不起作用

时间：2015-11-03 00:39:48

标签： angularjs templates nicedit

我正在尝试将wysiwyg nicEdit文本编辑器添加到我的文本区域。当我转到实际的templateUrl时，文本框和工具栏可以正常工作，但它们没有正确提交（到我的firebase数据库）。当我转到要呈现模板的页面时，我无法获得nicEdit工具栏功能，只需获得一个常规文本区域框。我正在使用angularjs并将templateurl作为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工作的模板 enter image description here

但是去实际的templateUrl addPost.html它工作正常，减去无法提交 enter image description here

2 个答案:

答案 0 :(得分：1)

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

“AngularJS：如何在ng-include中制作角度加载脚本？” https://stackoverflow.com/a/19715343/1078450

（另外，您的头文件中的html不太可能呈现：<nav class="blog-nav">）

答案 1 :(得分：1)

好吧，我遇到了同样的问题，在模板中初始化了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中执行此操作的代码示例。

public class MusicDB extends SQLiteOpenHelper{


    public static String DATABASE_NAME = "MusicDB.sqlite";
    private Context context;
    public static final int DATABASE_VERSION = 4;

    public static final String TABLE_CONFIG = "config";
    public static final String TABLE_SONGS = "songs";
    public static final String TABLE_PLAYLISTS = "playlists";
    public static final String TABLE_PLAYLISTS_SONGS = "playlists_songs";

    // CONFIG TABLE //
    public static final String config_id = "id";
    public static final String config_Directory = "Directory";
    /////////////////

    // SONGS TABLE //
    public static final String songs_id = "id";
    public static final String songs_name = "Name";
    public static final String songs_path = "Path";
    public static final String songs_downloadLing = "downloadLink";
    ////////////////

    // PLAYLISTS TABLE //
    public static final String playlists_id = "id";
    public static final String playlists_name = "Name";
    ////////////////////

    // PLAYLISTS SONGS TABLE //
    public static final String playlists_songs_id = "id";
    public static final String playlists_songs_playlistid = "playlist_id";
    public static final String playlists_songs_songid = "song_id";
    //////////////////////////

//    public MusicDB(Context context, StorageApi api, String mountId) {
//        super(context, DATABASE_NAME, null, DATABASE_VERSION);
//        this.api = api;
//        this.mountID = mountId;
//    }

    public MusicDB(Context context) {
        super(context, context.getExternalFilesDir("") + DATABASE_NAME, null, DATABASE_VERSION);
//        context.openOrCreateDatabase(context.getExternalFilesDir("")+DATABASE_NAME, Context.MODE_PRIVATE, null);
        this.context = context;
    }

    @Override
    public void onCreate(SQLiteDatabase db) {

//        try {
//            db = SQLiteDatabase.openDatabase(DB_PATH + DATABASE_NAME, null, SQLiteDatabase.OPEN_READWRITE);
//            db.close();
//        } catch (SQLiteException e) {

//        db = SQLiteDatabase.openOrCreateDatabase(context.getExternalFilesDir("")+DATABASE_NAME, null);

        final String CREATE_CONFIG_TABLE = "CREATE TABLE IF NOT EXISTS "+TABLE_CONFIG+" ("+config_id+" INTEGER PRIMARY KEY,"+config_Directory+" TEXT NOT NULL UNIQUE)";
        db.execSQL(CREATE_CONFIG_TABLE);

        final String CREATE_SONGS_TABLE = "CREATE TABLE IF NOT EXISTS "+TABLE_SONGS+" ("+songs_id+" INTEGER PRIMARY KEY,"+songs_name+" TEXT NOT NULL UNIQUE,"+songs_path+" TEXT NOT NULL,"+songs_downloadLing+" TEXT UNIQUE)";
        db.execSQL(CREATE_SONGS_TABLE);

        final String CREATE_PLAYLISTS_TABLE = "CREATE TABLE IF NOT EXISTS "+TABLE_PLAYLISTS+" ("+playlists_id+" INTEGER PRIMARY KEY,"+playlists_name+" TEXT NOT NULL UNIQUE)";
        db.execSQL(CREATE_PLAYLISTS_TABLE);

        final String CREATE_PLAYLISTS_SONGS = "CREATE TABLE IF NOT EXISTS "+TABLE_PLAYLISTS_SONGS+" ("+playlists_songs_id+" INTEGER PRIMARY KEY,"+playlists_songs_playlistid+" INTEGER NOT NULL,"+
                playlists_songs_songid+" INTEGER NOT NULL, FOREIGN KEY ("+playlists_songs_playlistid+") REFERENCES "+TABLE_PLAYLISTS+"("+playlists_id+") ON DELETE CASCADE," +
                "FOREIGN KEY ("+playlists_songs_songid+") REFERENCES "+TABLE_SONGS+"("+songs_id+") ON DELETE CASCADE);";
        db.execSQL(CREATE_PLAYLISTS_SONGS);
//        }

    }

    @Override
    public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {
        Log.i("TEST", "Se apeleaza onUPDATE");
        db.execSQL("DROP TABLE IF EXISTS " + TABLE_CONFIG);
        db.execSQL("DROP TABLE IF EXISTS " + TABLE_SONGS);
        db.execSQL("DROP TABLE IF EXISTS " + TABLE_PLAYLISTS);
        db.execSQL("DROP TABLE IF EXISTS " + TABLE_PLAYLISTS_SONGS);

        onCreate(db);
    }

    public void addDirectory(String name) {

        Log.i("TEST", "Adaug in Config " + name);

        SQLiteDatabase db = this.getWritableDatabase();
        ContentValues values = new ContentValues();

        values.put(config_Directory, name);

        db.insert(TABLE_CONFIG, null, values);
        db.close();
    }

    public ArrayList<String> getDirectories() {
        ArrayList<String> directories = new ArrayList<>();

        String selectQuery = "SELECT * FROM "+TABLE_CONFIG;

        SQLiteDatabase db = this.getReadableDatabase();
        Cursor cursor = db.rawQuery(selectQuery, null);

        if (cursor.moveToFirst()) {
            do {
                directories.add(cursor.getString(1));
            } while (cursor.moveToNext());
        }

        cursor.close();
        db.close();
        return directories;
    }
}

here是动态NicEdit使用的一个有效例子。

相关问题
最新问题