home.html

{% extends '/gerenciar/base.html' %}
{% block js %}
<script type="text/javascript" src="/static/angular/js/angular.min.js"></script>
<script type="text/javascript" src="/static/jogos/jogo_form.js"></script>
<script type="text/javascript">
    var jogoApp = angular.module('jogoApp', ['jogoModulo']).controller("JogoController", function($scope){
        $scope.jogo={tit: 'Teste', map: 'Teste', qtd: '1', tmp: 'Sem limite', grp: 'Jogo Aberto'};
        $scope.mostra=false;

        $scope.formOnOff=function(){
            $scope.mostra=!$scope.mostra;
        }
    });
</script>
{% endblock %}
{% block conteudo %}
    <div class="col-md-12"  ng-app="jogoApp" ng-controller="JogoController">
        <div class="conteudo">
            <div class="well">
                <button class="btn btn-primary" ng-click="formOnOff()">Novo Jogo</button>
                <br /><br />
                <jogoform ng-show="mostra" form-on-off="formOnOff()" game="jogo"></jogoform>
                <table class="table">
                    <thead>
                    <tr>
                        <th>Titulo</th>
                        <th>Mapa</th>
                        <th>Chances</th>
                        <th>Tempo</th>
                        <th>Grupo</th>
                        <th></th>
                    </tr>
                    </thead>
                    {% for jogo in jogo_lista %}
                    <tr>
                        <td>{{ jogo.tit }}</td>
                        <td>{{ jogo.map }}</td>
                        <td>{{ 'Unica Tentativa' if jogo.qtd == '1' else jogo.qtd}}</td>
                        <td>{{ 'Sem Limite' if jogo.tmp == '' else '%s %s' %(jogo.tmp, 'horas') }}</td>
                        <td>{{ 'Jogo Aberto' if jogo.grup == '' else jogo.grup}}</td>
                        <td><a href="{{ jogo.edit_path }}"><span class="glyphicon glyphicon-pencil" style="color: #080808"></span> </a></td>
                        <td><a href="{{ jogo.delete_path }}"><span class="glyphicon glyphicon-trash" style="color: #080808"></span> </a></td>
                    </tr>
                    {% endfor %}
                </table>
            </div>
		</div>
    </div>
{% endblock %}

jogo_form.js

var jogoModulo=angular.module('jogoModulo', [])

jogoModulo.directive('jogoform', function(){
    return{
        restrict: 'E',
        replace: true,
        templateUrl: '/static/jogos/novo.html',
        scope:{
            game: '=',
            formOnOff: "&"
        },
        controller:function($scope, $http){
            $scope.salvar=function(){
                $scope.formOnOff();
                $http.post('/jogos/rest/new',$scope.game).success(function(result){
                    console.log(result);
                }).error(function(erros){
                    console.log(erros)
                });
            }
        }

    };
});

novo.html

<div class="well">
    <h1>Criando jogos</h1>

    <div class="form-group ">
        <label for="titInput" class="control-label">Título </label>
        <input id="titInput" type="text" class="form-control" ng-model="game.tit">
    </div>

    <div class="form-group ">
        <label for="mapInput" class="control-label">Mapas </label>
        <input id="mapInput" type="text" class="form-control" ng-model="game.map">
    </div>

    <div class="form-group ">
        <label for="qtdInput" class="control-label">Chances (Padrão 1) </label>
        <input id="qtdInput" type="text" class="form-control" ng-model="game.qtd">
    </div>

    <div class="form-group ">
        <label for="tmpInput" class="control-label">Tempo Limite (Padrão Sem Limite) </label>
        <input id="tmpInput" type="text" class="form-control" ng-model="game.tmp">
    </div>

    <div class="form-group ">
        <label for="grpInput" class="control-label">Grupo </label>
        <input id="grpInput" type="text" class="form-control" ng-model="game.grp">
    </div>

    <button ng-click="salvar()" class="btn btn-primary">Criar</button>
</div>