Angular.jsのJSONからコードサンプルを渡してパースします

Question

だから皆さん、もう1つの質問をv'got ...現在、自分自身のウェブサイトブログを構築しています（自己教育の目的からスクラッチから）。面白いスタッフといくつかのスマートなもの（私のコードの記事のような）が含まれます。 Angular.jsのために動作するスタティックのサイトです。ある日、RoRとバックエンドではダイナミックになりますが、昨日直面した号について今は気にしません。例：単一のポストのページを動的に作成し、その後

.state('smartStuff', { 
    url: '/smartStuff', 
    views: { 
    'content': { 
     templateUrl: 'html/smartStuff.html', 
     controller: 'SmartStuffController' 
    } 
    } 
}) 

：：私はJSONから取得する各ポストに表す

.state('postsAboutSmartStuff', { 
    url: '/smartStuff/{smartStuffPostId}', 
    views: { 
    'content': { 
     templateUrl: 'html/post.html', 
     controller: 'SmartStuffController' 
    } 
    } 
}) 

コンテンツを私はすべての「スマート」の記事のための経路がどのように見えるんですサービスを介して...

angular.module('postsServices', []) 
.factory('postsFactory', function($http) { 
    var promise; 
    return { 
     all: function() { 
      if(!promise) { 
       promise = $http.get('postsSmartStuff.json') 
        .then(function(response) { 
         return response.data; 
        }) 
      } 
      return promise; 
     } 
    } 
}); 

と、コントローラ...のような：

var postsControllers = angular.module('postsControllers', []); 
postsControllers.controller('SmartStuffController', function($scope, postsFactory, $stateParams) { 
    postsFactory.all() 
     .then(function(posts) { 
      $scope.posts = posts; 
      $scope.smartStuffPostId = $stateParams.smartStuffPostId; 

      function getById(arr, id) { 
      for (var i = 0; i < arr.length; i++) { 
        if (arr[i].id == id) { 
         return arr[i]; 
        } 
      } 
      } 
      $scope.singlePost = getById($scope.posts, $stateParams.smartStuffPostId); 

     }); 
}); 

ALL FORK！私のJSONは次のようになります：

[{ 
    "id": 1, 
    "theme": "vanilla javascript", 
    "title": "Post 2", 
    "description": "Description two" 
}, 
{...}, 
] 

私はJSONをちょうどTEXTします。 私は既に言及したように - 私はしたいと私の記事でいくつかの実際のコードを書く...だから、最後に、私の質問どのように実際のコードを渡して、Angularのコントローラで正しく解析することができますか？私はのようにコード（関数、wateva）を渡すことは非常に悪い習慣だと感じていますが、今は他の解決策は見当たりません。私はちょうどそう学んでいるとにかく申し訳ありませんとどんなまともなヘルプも非常に高く評価されます。 希望は、私は自分自身を明確にし:)

Answer 1

これを行う最も簡単な方法は、実際に値下げなど、あなたのテキストを格納し、その後、このいずれかのように値下げディレクティブを使用することです：すべてのテキストを表示するhttps://github.com/btford/angular-markdown-directiveを。

/* UPDATE */ 明らかに、あなたののコンテンツは、Markdownにあるはずです。したがって、各投稿はまだJSONオブジェクトのようなものですが、あなたの投稿の本文を表すために使用しているデータ要素（上からはっきりしていない）や、書式設定された内容を含む投稿の他の部分はMarkdown、 MarkdownをHTMLに変換できるAngularディレクティブに渡されます。

だから、のようなJSONオブジェクトを持っ例えば、あなたは可能性があります

{ 
    "id": 1, 
    "theme": "vanilla javascript", 
    "title": "Post 2", 
    "description": "Description two", 
    "content" : "Hey, I have some awesome content here: ```var t = 'awesome'; alert(t); ```" 
} 

すでに行うように、あなたはそれを取得していますが、angular-markdown-directiveをインスタンス化するとき、あなたはあなたのコンテンツにそのディレクティブをバインドしたい：

<!-- Assuming 'content' is in the current scope; might have to be singlePost.content or something else --> 
<div btf-markdown="content"> 
</div> 

または可能性：

<btf-markdown>{{singlePost.content}}</btf-markdown>