Create a directive

Asked

Viewed 242 times

0

Hello someone could help me, I’m just starting my teachings in angular and would like to know how I would create a directive for the list of categories and tasks. I have no idea what could be done, if you can help me.

HTML:

<body>
    <div id="div-container" class="container ng-scope" ng-controller="TarefasController">
        <div class="row">
            <div class="col-xs-3 edit">

                <!-- Ínicio Adicionar Categoria -->
                <div class="page-header">
                    <h4>Adicionar Categoria</h4>
                </div>
                <div id="div-form">
                    <form role="form" class="ng-pristine ng-valid">
                        <div class="form-group">
                            <input type="text" class="form-control ng-pristine ng-valid" ng-model="categoria.nome" ng-model="name">
                        </div>
                        <button class="btn btn-info btn-block ng-pristine ng-valid" ng-click="addCategoria(categoria)" ng-model="infoIgual" ng-disabled="!categoria.nome" disabled="disabled">Adicionar</button>
                    </form>
                </div>
                <!-- Fim Adicionar Categoria -->

                <!-- Ínicio Adicionar Tarefa -->
                <div class="page-header">
                    <h4>Adicionar Tarefa</h4>
                </div>
                <div id="div-form">
                    <form role="form" class="ng-pristine ng-valid">
                        <div class="form-group">
                            <input type="text" class="form-control ng-pristine ng-valid" ng-model="tarefa.nome" ng-model="name">
                            <br>
                            <select class="form-control" id="category" ng-options="item.nome as item.nome for item in categorias" ng-model="categoriaSelecionada">

                            </select>
                        </div>
                        <button class="btn btn-info btn-block ng-pristine ng-valid" ng-click="addTarefa(tarefa)" ng-model="infoIgual" ng-disabled="!tarefa.nome" disabled="disabled">Adicionar</button>
                    </form>
                </div>
                <!-- Fim Adicionar Tarefa -->
            </div>

            <!-- Categorias + Tarefas -->
            <div class="col-xs-9 edit">

                <!-- Início Buscar -->
                <div class="col-xs-12">
                    <div class="page-header">
                        <h4>Filtro</h4>
                    </div>
                </div>
                <div class="form-group col-xs-6">
                    <div class="inner-addon right-addon">
                        <i class="glyphicon glyphicon-search"></i>
                        <input class="form-control" type="text" ng-model="BuscarCategoria" placeholder="Buscar Categorias"/>
                    </div>
                </div>
                <div class="form-group col-xs-6">
                    <div class="inner-addon right-addon">
                        <i class="glyphicon glyphicon-search"></i>
                        <input class="form-control" type="text" ng-model="BuscarTarefas" placeholder="Buscar Tarefas"/>
                    </div>
                </div>
                <!-- Fim Buscar -->

                <!-- Início Botões -->
                <div class="form-group col-xs-4">
                    <button class="btn btn-warning btn-block" ng-click="delTarefas()">Tarefas Incompletas</button>
                </div>
                <div class="form-group col-xs-4">
                    <button class="btn btn-warning btn-block" ng-click="delTarefas()">Tarefas Concluídas</button>
                </div>
                <div class="form-group col-xs-4">
                    <button class="btn btn-danger btn-block" ng-click="delTarefas()">Apagar Tarefas Concluídas</button>
                </div>
                <!-- Fim Botões -->

                <br>

                <!-- Início Categorias/Tarefas -->
                <div class="col-xs-12">
                    <div ng-repeat="categoria in categorias | filter:BuscarCategoria">
                        <h4 ng-model="categoria.selecionado">{{categoria.nome}}</h4>
                        <div ng-repeat="tarefa in categoriaTarefa.tarefa[categoria.nome] | filter:BuscarTarefas">
                            <input type="checkbox" ng-model="tarefa.selecionado" ng-click="tarefaFeita()">
                            <span class="done-{{tarefa.selecionado}}">{{tarefa.nome}}</span>
                        </div>
                    </div>
                </div>
                <!-- Fim Categorias/Tarefas -->
            </div>
        </div>
    </div>
</body>

ANGULAR JS:

    // Code goes here
    angular.module('TarefApp')

    .controller('TarefasController', function($scope) {
        $scope.categorias = [];
        $scope.tarefas = [];
        $scope.categoriaTarefa = {tarefa:{}};

        $scope.addTarefa = function(tarefa) {
            if(!$scope.categoriaSelecionada){
                alert("Selecione uma categoria!")
                return;
            }

        var c = $scope.categoriaSelecionada;

        if(!$scope.categoriaTarefa.tarefa[c])
        $scope.categoriaTarefa.tarefa[c] = [];
        else{
            var itemDuplicado = false;
            angular.forEach($scope.categoriaTarefa.tarefa[c], function (item, index){
                itemDuplicado = (item.nome === tarefa.nome);
                if(itemDuplicado){
                    alert("Tarefa para categoria já existe!");
                    return false;
                }
            });
        }

        if(!itemDuplicado){
            $scope.categoriaTarefa.tarefa[c].push(tarefa);
            $scope.tarefa = {};
        }
    };

    $scope.delTarefas = function() {
        angular.forEach($scope.categorias, function(item) {
            var c = item.nome;
            var oldTarefas = $scope.categoriaTarefa.tarefa[c];
            $scope.categoriaTarefa.tarefa[c] = [];

            angular.forEach(oldTarefas, function(tar) {
                if (!tar.selecionado) $scope.categoriaTarefa.tarefa[c].push(tar);
            });
        });
    };

    $scope.addCategoria = function(categoria) {
        for(var i=0; i < $scope.categorias.length; i++){
            if($scope.categorias[i].nome === categoria.nome){
                alert("A categoria já existe!");
                return;
            }
        }
        $scope.categorias.push(angular.copy(categoria));
        delete $scope.categoria;
    };
});
angularjs angularjs-directives angularjs-scope angular-module

  • Wow you’ve doubled the question so many times I don’t even know which one is the main one.

  • This is not the same question about ng-repeat. So much so that I can understand how it works to create directives.

  • The problem may be the excess of duplicates and the way you ask the questions that make everything look the same.

  • Yes, I’m sorry again.

1 answer

2


You can before the closure of controller put, for example:

.directive('ngSparkline', function() {
  return {
    restrict: 'A',
    template: '<div class="sparkline"></div>'
  }
});

Or declare the module within a variable and use the variable to create the directive.

var app = angular.module('TarefApp');

app.directive('ngSparkline', function() {
  return {
    restrict: 'A',
    template: '<div class="sparkline"></div>'
  }
});

To use in HTML just declare a div element, for example , taking into account the value of the attribute restrict placed in the directiva:

  • A: Only matches the attribute name

    <div ng-sparkline></div>

  • E: Only matches the element name

    <my-sparkline></my-sparkline>

  • C: Only matches the class name

  • AEC: Combines with all of them

References and other information relevant to the Directives:

https://docs.angularjs.org/guide/directive

Browser other questions tagged angularjs angularjs-directives angularjs-scope angular-module

You are not signed in. Login or sign up in order to post.