JSFiddle - React, Tailwind, and code Playground

by glebcha

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
<div class="vk-search" ng-app="vkSearch" ng-controller="ctrl">
    <form name="vkSearchForm" class="form" ng-submit="display()">
        <input type="text" ng-model="public_name" class="form-control" placeholder="Название паблика" required>
        <input type="text" ng-model="search_query" class="form-control" placeholder="Что искать?" required>
        <div class="message col-md-12" ng-bind-html="message | pureHtml"></div>
        <div class="col-md-12 btn-group">
            <button type="submit" class="btn btn-default" ng-disabled="vkSearchForm.$invalid">Показать</button>
            <button class="btn btn-default" ng-click="fav()" ng-disabled="vkSearchForm.$invalid">Добавить в избранное</button>
        </div>
    </form>
    <div ng-repeat="item in items" class="container">
         <h4 ng-bind-html="item.text | pureHtml"></h4>

        <div ng-repeat="attachment in item.attachments" ng-controller="media"> 
            <img ng-src="{{ attachment.image }}">
            <audio ng-if="attachment.audio" addr="{{ attachment.music }}" artist="{{ attachment.audio.artist }}" title="{{ attachment.audio.title }}"></audio>   
        </div>
    </div>
</div>

JavaScript

var app = angular.module("vkSearch", []);

//TODO - testing
app.directive("audio", function(){
    return {
        template: '<a href="{{ link }}">{{ artist }} - {{ title }}</a>',
        scope:{
          link:'@addr',
          artist:'@artist',
          title:'@title'
        }
    };
});

app.service("favor", function(){
    var service = {
        stored: [],
        setFavor: function(item){
            service.stored.push( item );
            localStorage.setItem('ng-fav', JSON.stringify(service.stored));
            //console.log(service.stored);
        },
        getFavor: function(){
            return JSON.parse(localStorage.getItem('ng-fav'));
        }
    };
    if (localStorage.getItem('ng-fav') !== null) {
        service.stored = service.getFavor();
    }
    return service;
});

app.filter("pureHtml", ['$sce', function ($sce) {
    return function (content) {
        return $sce.trustAsHtml(content);
    };
}]);

app.filter("pureSrc", ['$sce', function ($sce) {
    return function (audio) {
        return $sce.trustAsResourceUrl(audio);
    };
}]);

app.controller("ctrl", function ($scope, $http, favor) {
    $scope.display = function () {
        var url = 'http://api.vk.com/method/wall.search?domain=' + $scope.public_name + '&query=' + $scope.search_query + '&count=10&offset=0&callback=JSON_CALLBACK';
        $scope.public_name = '';
        $scope.search_query = '';
        $scope.items = [];
        $http.jsonp(url).success(

        function (data) {
            var response = data.response;
            if (response !== undefined) {
                response.shift();
                $scope.items = response;
                console.log(response);
            } 
            else if (response !== undefined && response.length < 1) {
                $scope.message = '<span class="label label-warning">Ничего не найдено</span>';
            } else {
                $scope.message = '<span class="label label-warning">' + data.error.error_msg +...