質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

89.97%

Rails angularJSでリアルタイムプレビュー機能を実装したいですが 、jsの設定がわかりません

受付中

回答 1

投稿 ・編集

  • 評価
  • クリップ 0
  • VIEW 1,520
big2017

big2017

score 30

質問させていただきます。

teratailやqiitaのようなtextareaの編集の際リアルタイムで右画面に反映、表示させることがしたく、実装しようとチャレンジしていますが現状うまくいっておりません。

以下の記事の手順通りに進めています。

http://qiita.com/sachin21/items/e7df2720fbf362052f34

この記事の中の実装２の手順で 

app.controller 'parsedMarkdownCtrl', ['$scope', ($scope) ->
  $scope.parseMarkdown = ->
    $("#preview").html(marked($scope.content))
]


のコードをどこかに記す必要があるとのことなのですが、どこのファイルに書けば良いのか分かっておりません。  (場所もjsなのかcoffeeなのかも混乱しています)
わからないまま、自分なりに検索しつつapp.coffeeの中に書いたりしたのですが、全く機能しません....
angularの読み込む設定等理解できていないのが根本的な問題なのは分かっておりますが、どうにかして実装したいと思っております。大変お手数おかけしますが、教えていただけないでしょうか....

Noteモデルのbodyカラムでリアルタイムプレビュー機能をつけたいです
参考までに現状のファイルは以下のようになっております。 

Gemfile

source 'https://rubygems.org'
gem 'rails', '4.2.4'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'materialize-sass'
gem 'redcarpet', '~> 3.3', '>= 3.3.4' # markdown
gem "angular-rails-engine"
gem 'marked-rails' # markdownをparseしてくれる
gem 'coderay', '~> 1.1'

group :development do
  gem 'sqlite3'
  gem 'web-console', '~> 2.0'
  gem 'spring'
end
app/assets/javascripts/application.js

//= require jquery
//= require materialize-sprockets
//= require jquery_ujs
//= require jquery.timeago
//= require turbolinks
//= require_tree .
//= require marked

共通テンプレート内でangularを読み込んでいます。 

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html ng-app>
<head>
  <title>プレビュー</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <%= yield :head %>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="lib/marked.js"></script>
   <!-- GoogleデベロッパーツールでGET http://localhost:3000/notes/lib/marked.js 404 (Not Found)というエラーが出てます -->
</head>
<body>

  {{6 * 8}}  <!--48と表示されます -->

      <div class="container">
        <%= yield %>
      </div>
</body>
</html>

noteのフォーム画面です（ここのbodyを編集している時にリアルタイムプレビューにしたいです） 

<%= form_for(@note) do |f| %>
  <%= f.text_field :body, 'ng-model' => 'body', "ng-change" => 'parseMarkdown()', id: 'note_body', name: 'note[body]'  %>
  <div class="right" id='preview'></div>

  <div class="actions">
    <%= f.submit "投稿!" %>
  </div>
<% end %>

↓このコードをどこに書いていけば良いのかがわかりません.....
自分なりにapp/assets/javascripts/app.coffeeに書いてみたのですが、appが無いですよというエラーが出たりもしていて全然わからないです.... 

app.controller 'parsedMarkdownCtrl', ['$scope', ($scope) ->
  $scope.parseMarkdown = ->
    $("#preview").html(marked($scope.body))
]

自分で解決するのは難しいと判断したため、、質問させていただきました。
どんなことでも良いので、回答いただけますと本当に嬉しく思います。
お休みの中お手数おかけしますが何卒よろしくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1 件

link

+3

簡単なサンプルを作成してみたので参考にしてみてください。

実際動くリンク 

<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.1/angular-sanitize.min.js"></script>
<script>
  angular.module('myApp', ['ngSanitize']).controller('MyController', function($scope) {
    // 分かりやすく初期値を入れています
    $scope.content = '## aaaaaaa';
    $scope.preview = marked($scope.content);

    // テキストエリアに変更があった場合の処理
    $scope.parseMarkdown = function(){
      // マークダウン形式に変更
      $scope.preview = marked($scope.content);
    }
  });
</script>

</head>
<body ng-controller="MyController">
  <div>
    <textarea ng_change="parseMarkdown()" ng_model="content"></textarea>
    <div ng-bind-html="preview"></div>
  </div>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • この投稿は削除されました

  • 2017/01/15 03:03

    回答いただきありがとうございます!わざわざサンプルまで作っていただいたおかげで、とてもわかりやすくangularの理解が進みました。
    しかし、railsのフォームを入力する際リアルタイムでプレビューをすることがまだできていない状態です.....

    以下のコードです
    ```
    // テキストエリアに変更があった場合の処理
    $scope.parseMarkdown = function(){
    // マークダウン形式に変更
    $scope.preview = marked($scope.content); //リアルタイムに反映
    }
    ````

    ここに関しては明日も考えてみますので、すみませんがもう少々お待ちください。解決した際にはこちらに共有させていただきます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 89.97%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る