2015-11-03 2 views
0

Я пытаюсь добавить текстовый редактор wysiwyg nicEdit в свои текстовые области. Когда я перехожу к фактическому шаблону, текстовое поле и панель инструментов работают, но они не отправляются правильно (на мой firebase db). Когда я перехожу на страницу, которая должна отображать шаблон, я не могу получить функции панели инструментов nicEdit и просто получить текстовое поле. Я использую angularjs и шаблон templatel как addPost.html.nicEdit не работает в шаблонах

Итак, шаблон снова визуализируется, когда я goto #/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.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

ответ

1

Проблема связана с попыткой запуска скриптов Angular html partials. Простое решение состоит в том, чтобы переместить скрипты в голову основного файла индекса за пределами ng-view, хотя, как представляется, (по другим сообщениям stackoverflow) можно технически попытаться выполнить эти сценарии:

" AngularJS: Как создать скрипт с угловой загрузкой внутри ng-include? " https://stackoverflow.com/a/19715343/1078450

(Кроме того, у вас есть HTML в файле головы, который может быть вынесено не: <nav class="blog-nav">)

+0

Пробовал перемещать файлы сценариев в голову моего основного индексного файла за пределами ng-view и по-прежнему не отображает функции nicedit в текстовой области моего шаблона. Я не использую ng-include для добавления шаблонов, а просто перенаправляю маршруты с помощью .config. Однако html-класс nav отображает в шаблоне. Извините за это, но я думаю, что могу исправить это, используя ng-include, чтобы отобразить частичную информацию из указанной вами ссылки. Благодарю. – sp312

+0

Пробовал это снова с ckeditor вместо nicedit, и это сработало. Благодаря! – sp312

1

Ну, у меня была та же проблема, с инициализации NicEdit в шаблонах. Сначала я использовал onDomLoaded() еще, но лучше ждать документа. С jQuery я использую document.ready.

Посмотрите здесь, pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

Проблема заключается в том, чтобы сказать 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(); 
}); 

И here является рабочим Пример динамического использования NicEdit.

Смежные вопросы