I can not find my error in a project using Angularjs creating a directive type element

Navigation
1

Good morning. I have a question in a project that I am doing, in which I use angularjs and html. What I have to do is basically create a directive type element that contains all the content in a table, which depends on an object in a controller, which when initialized already has an object of an array of 30. For that I owe an interface Web so that a table can coexist with the actions of each record. I already have the code ready, the problem is that I can not find my error. I have already corrected several times and I have tried to change several things to see if this works but nothing. My error is that the elements of the array are not shown, which I already declared in .js, nor are new elements added to the array.

What I have as a code is the following:

In custom_directiva.html I have: 

<!DOCTYPE html>
<html ng-app="app">
<product-panels>
  <head>
  <script type="text/javascript" src="js/angular.min.js"></script>
  <script type="text/javascript" src="js/app.js"></script>
  <script type="text/javascript" src="js/app2.js"></script>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css"/>

  <link rel="stylesheet" href="css/todo.css">
  <meta charset="UTF-8">  
  </head>

<body>

<div class="tab">
  <a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Pagina principal')">Pagina principal</a>
  <a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Agregar productos')">Agregar productos</a>
  <a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Mostrar productos')">Mostrar productos</a>

</div>



<div id="Agregar productos" class="tabcontent">


<center>
     <form name="miFormulario" class="css-form">
       <hr>
       <h1 style="color:#01DF01"><img src="img/logo.jpg"/><br><br><br>Biotactex. Productos ecologicos C.A.</h1>
       <hr/>
       <b style="color:#5FB404">ID:<b/><br>
       <input type="text" ng-model="pro.Id" name="Id" placeholder="Id de producto" class="efecto" style="text-transform: uppercase;" required/>
       <br>
       <br>
       <b>Nombre:<b/><br>     
       <input type="text" ng-model="pro.Nombre" name="Nombre" placeholder="Nombre" class="efecto" style="text-transform: uppercase;" required/>
       <br>
       <br>
       <b>Descripción:<b/><br>
      <input type="text" ng-model="pro.Descripcion" name="Descripcion" placeholder="Descripción" class="efecto" required/>
       <br>
       <br>
       <b>Fecha:<b/><br>
       <input type="date" ng-model="pro.Fecha" name="Fecha" placeholder="yyyy-MM-dd" class="efecto" required/>
       <br>
       <br>
       <b>Precio:<b/><br>
       <input type="number" ng-model="pro.Precio" placeholder="Precio" class="efecto" name="Precio" ng-minlength="0" min=1 max=1000 required/><b> $<b/>
       <br>
       <br>
       <b>Cantidad:<b/><br>
       <input type="number" ng-model="pro.Cantidad" placeholder="Cant" class="efecto" name="Cantidad" ng-minlength="1" ng-maxlength="51" min=1 max=50 required/>
       <br>
       <br>
       <b>Imagen:<b/><br>
         <select ng-model="pro.images" ng-options="imag for imag in imagenes" name="Imagen" class="efecto" required>
         <option value="">Elegir una opción</option>
         </select>
       <br>
       <br>
       <button ng-click="reset()" class="btn btn-primary btn-sm">Limpiar</button>      
        <button type="submit"  ng:click="newUser()" class="btn btn-primary btn-sm">Agregar</button>
        <br><br><br>
   </form>

   <style>
    .efecto
    {
        color:white;
        background:green;

    }
   </style>


</div>


<div id="Mostrar productos" class="tabcontent">

       <hr>
       <center><h3 style="color:#5FB404">Productos Biotactex. Compañia Ecologica de distribución de productos.</h3><center/>
       <hr/>
       <table class="container"> 
        <thead>
         <tr>

          <td align="center">Id</td>
          <td align="center">Nombre</td>
          <td align="center">Descripción</td>
          <td align="center">Imagen</td>
          <td align="center">Fecha</td>
          <td align="center">Precio</td>
          <td align="center">Cantidad</td>
          <td align="center">Acción</td>

        </tr>
         </thead>


            <tbody>

            <tr ng-repeat="prod in productos" ng-style="{color:($odd?'black':'green')}">
            <td style="text-transform: uppercase;" align="center">{{prod.Id}}</td>
            <td align="center">{{prod.Nombre}}</td>
            <td align="center">{{prod.Descripcion}}</td>
            <td align="center"><img src='{{prod.images}}'></td>
            <td align="center">{{prod.Fecha | date:"longDate"}}</td>
            <td align="center">{{prod.Precio}}</td>
            <td align="center">{{prod.Cantidad}}</td>

            <td align="center"><input type="checkbox" ng-model="prod"/>Ocultar</td>
            <td><ng-if="prod"></td>


            </tr>
        </tbody>
        </table>
            <hr>
            <tr>
            <button class="btn-warning" ng:click="removeItem($index)">Borrar fila</button>
            <button class="btn-warning" ng:click="borrar()">Borrar todo</button>
            <input class="btn-warning" type="submit" value="Mostrar Datos" ng-model="prod"/>    
            </tr>
            </hr>

</div>

<div id="Pagina principal" class="tabcontent">

<center><h2>Biotactex. Productos ecologicos C.A.</h2></center>


</div>





            </center>
  </body>
  </product-panels>
</html>

In app2.js I have: 

app.directive('productPanels', function(){
    return {
        restrict:'E',
        templateUrl:'custom_directiva.html',
        controller: function($scope)
{
     $scope.imagenes=['img/bolsabio.jpg', 'img/eco.jpg', 'img/ecopaz.jpg','img/green-shopping.jpg','img/images.jpg','img/reciclaje.jpg'];
     $scope.pro = {};
     $scope.newUser = function()
     {
        $scope.productos.push($scope.pro);

    }

     $scope.reset = function() 
     {

        $scope.pro = { Id: '', nombre: '', descri:'', fecha:'',Precio:'', Cantidad:''};

      }
      $scope.borrar=function()
      {

          $scope.productos=[];

      }

      $scope.removeItem = function(custom_directiva) 
      {
        $scope.productos.splice(index,1);

      } 

   $scope.productos=[
      {
          Id:'4323432',
          Nombre:'Bolsas verdes',
          Descripcion:'Bolsas de plástico biodegradables',
          images:'img/bolsabio.jpg',
          Fecha:'2015-06-10',
          Precio:20,
          Cantidad:10
      },
      {
          Id:'654645',
          Nombre:'Quimicos verdes',
          Descripcion:'Detergentes biodegradables',
          images:'img/eco.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      },

{
          Id:'764643',
          Nombre:'Aromaticos verdes',
          Descripcion:'Aromaticos que no emiten quimicos dañinos',
          images:'img/green-shopping.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      },

      {
          Id:'979089078',
          Nombre:'Bombillas verdes',
          Descripcion:'Bombillas de bajo consumo',
          images:'img/ecopaz.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      },

      {
          Id:'4352329',
          Nombre:'Productos desechables biodegrables',
          Descripcion:'Productos verdes no contaminantes',
          images:'img/images.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      },

      {
          Id:'3423432',
          Nombre:'Porta basura de reciclaje',
          Descripcion:'Para reciclar basura',
          images:'img/reciclaje.jpg',
          Fecha:'2015-04-05',
          Precio:40,
          Cantidad:29
      },

          {
          Id:'4323432',
          Nombre:'Bolsas verdes',
          Descripcion:'Bolsas de plástico biodegradables',
          images:'img/bolsabio.jpg',
          Fecha:'2015-06-10',
          Precio:20,
          Cantidad:10
      },
      {
          Id:'654645',
          Nombre:'Quimicos verdes',
          Descripcion:'Detergentes biodegradables',
          images:'img/eco.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      },

{
          Id:'764643',
          Nombre:'Aromaticos verdes',
          Descripcion:'Aromaticos que no emiten quimicos dañinos',
          images:'img/green-shopping.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      },

      {
          Id:'979089078',
          Nombre:'Bombillas verdes',
          Descripcion:'Bombillas de bajo consumo',
          images:'img/ecopaz.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      },

          {
          Id:'4323432',
          Nombre:'Bolsas verdes',
          Descripcion:'Bolsas de plástico biodegradables',
          images:'img/bolsabio.jpg',
          Fecha:'2015-06-10',
          Precio:20,
          Cantidad:10
      },
      {
          Id:'654645',
          Nombre:'Quimicos verdes',
          Descripcion:'Detergentes biodegradables',
          images:'img/eco.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      },

{
          Id:'764643',
          Nombre:'Aromaticos verdes',
          Descripcion:'Aromaticos que no emiten quimicos dañinos',
          images:'img/green-shopping.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      },

      {
          Id:'979089078',
          Nombre:'Bombillas verdes',
          Descripcion:'Bombillas de bajo consumo',
          images:'img/ecopaz.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      },

          {
          Id:'4323432',
          Nombre:'Bolsas verdes',
          Descripcion:'Bolsas de plástico biodegradables',
          images:'img/bolsabio.jpg',
          Fecha:'2015-06-10',
          Precio:20,
          Cantidad:10
      },
      {
          Id:'654645',
          Nombre:'Quimicos verdes',
          Descripcion:'Detergentes biodegradables',
          images:'img/eco.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      },

{
          Id:'764643',
          Nombre:'Aromaticos verdes',
          Descripcion:'Aromaticos que no emiten quimicos dañinos',
          images:'img/green-shopping.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      },

      {
          Id:'979089078',
          Nombre:'Bombillas verdes',
          Descripcion:'Bombillas de bajo consumo',
          images:'img/ecopaz.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      },

          {
          Id:'4323432',
          Nombre:'Bolsas verdes',
          Descripcion:'Bolsas de plástico biodegradables',
          images:'img/bolsabio.jpg',
          Fecha:'2015-06-10',
          Precio:20,
          Cantidad:10
      },
      {
          Id:'654645',
          Nombre:'Quimicos verdes',
          Descripcion:'Detergentes biodegradables',
          images:'img/eco.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      },

{
          Id:'764643',
          Nombre:'Aromaticos verdes',
          Descripcion:'Aromaticos que no emiten quimicos dañinos',
          images:'img/green-shopping.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      },

      {
          Id:'979089078',
          Nombre:'Bombillas verdes',
          Descripcion:'Bombillas de bajo consumo',
          images:'img/ecopaz.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      },

          {
          Id:'4323432',
          Nombre:'Bolsas verdes',
          Descripcion:'Bolsas de plástico biodegradables',
          images:'img/bolsabio.jpg',
          Fecha:'2015-06-10',
          Precio:20,
          Cantidad:10
      },
      {
          Id:'654645',
          Nombre:'Quimicos verdes',
          Descripcion:'Detergentes biodegradables',
          images:'img/eco.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      },

{
          Id:'764643',
          Nombre:'Aromaticos verdes',
          Descripcion:'Aromaticos que no emiten quimicos dañinos',
          images:'img/green-shopping.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      },

      {
          Id:'979089078',
          Nombre:'Bombillas verdes',
          Descripcion:'Bombillas de bajo consumo',
          images:'img/ecopaz.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      },

          {
          Id:'4323432',
          Nombre:'Bolsas verdes',
          Descripcion:'Bolsas de plástico biodegradables',
          images:'img/bolsabio.jpg',
          Fecha:'2015-06-10',
          Precio:20,
          Cantidad:10
      },
      {
          Id:'654645',
          Nombre:'Quimicos verdes',
          Descripcion:'Detergentes biodegradables',
          images:'img/eco.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      },

{
          Id:'764643',
          Nombre:'Aromaticos verdes',
          Descripcion:'Aromaticos que no emiten quimicos dañinos',
          images:'img/green-shopping.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      },

      {
          Id:'979089078',
          Nombre:'Bombillas verdes',
          Descripcion:'Bombillas de bajo consumo',
          images:'img/ecopaz.jpg',
          Fecha:'2015-06-11',
          Precio:30,
          Cantidad:6
      }

      ]
}
        controllerAs:'panels'

    };


});

I have not placed the content of app.js nor of the style.css because these if they run me well and the problem does not appear in them, but in those that present above. I do not know if my error is in app.js or in custom_directiva.html, although I think maybe it's the template URL or some code I have in the directive that contains the controller. I would greatly appreciate your response, regards

    
asked by Grecia V. P. Valero 23.03.2017 в 01:52
source

1 answer

2

There are certain problems with your code.
I really suggest you review the angularjs documentation or some tutorial like those of Egghead.
The templates of the directives do not usually contain the HTML, HEAD or BODY tags ...
Try the following:
custom_directiva.html 

<div>
<div id="Agregar productos" class="tabcontent">
    <center>
        <form name="miFormulario" class="css-form">
            <hr>
            <h1 style="color:#01DF01"><img src="img/logo.jpg"/><br/><br/> <br/>Biotactex. Productos ecologicos C.A.
            </h1>
            <hr/>
            <strong style="color:#5FB404">ID:</strong><br/>
            <input type="text" ng-model="pro.Id" name="Id" placeholder="Id de producto" class="efecto"
                   style="text-transform: uppercase;" required/>
            <br/>
            <br/>
            <strong>Nombre:</strong><br/>
            <input type="text" ng-model="pro.Nombre" name="Nombre" placeholder="Nombre" class="efecto"
                   style="text-transform: uppercase;" required/>
            <br/>
            <br/>
            <strong>Descripción:</strong><br/>
            <input type="text" ng-model="pro.Descripcion" name="Descripcion" placeholder="Descripción"
                   class="efecto" required/>
            <br/>
            <br/>
            <strong>Fecha:</strong><br/>
            <input type="date" ng-model="pro.Fecha" name="Fecha" placeholder="yyyy-MM-dd" class="efecto"
                   required/>
            <br/>
            <br/>
            <strong>Precio:</strong><br/>
            <input type="number" ng-model="pro.Precio" placeholder="Precio" class="efecto" name="Precio"
                   ng-minlength="0" min=1 max=1000 required/><strong> $</strong>
            <br/>
            <br/>
            <strong>Cantidad:</strong><br/>
            <input type="number" ng-model="pro.Cantidad" placeholder="Cant" class="efecto" name="Cantidad"
                   ng-minlength="1" ng-maxlength="51" min=1 max=50 required/>
            <br/>
            <br/>
            <strong>Imagen:</strong><br/>
            <select ng-model="pro.images" ng-options="imag for imag in imagenes" name="Imagen" class="efecto"
                    required>
                <option value="">Elegir una opción</option>
            </select>
            <br/>
            <br/>
            <button ng-click="reset()" class="btn btn-primary btn-sm">Limpiar</button>
            <button type="submit" ng-click="newUser()" class="btn btn-primary btn-sm">Agregar</button>
            <br/><br/><br/>
        </form>
    </center>
</div>
<div id="Mostrar productos" class="tabcontent">
    <hr>
    <center><h3 style="color:#5FB404">Productos Biotactex. Compañia Ecologica de distribución de productos.</h3>
        <center/>
        <hr/>
        <table class="container">
            <thead>
            <tr>
                <td align="center">Id</td>
                <td align="center">Nombre</td>
                <td align="center">Descripción</td>
                <td align="center">Imagen</td>
                <td align="center">Fecha</td>
                <td align="center">Precio</td>
                <td align="center">Cantidad</td>
                <td align="center">Acción</td>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="prod in productos" ng-style="{color:($odd?'black':'green')}">
                <td style="text-transform: uppercase;" align="center">{{prod.Id}}</td>
                <td align="center">{{prod.Nombre}}</td>
                <td align="center">{{prod.Descripcion}}</td>
                <td align="center"><img src='{{prod.images}}'></td>
                <td align="center">{{prod.Fecha | date:"longDate"}}</td>
                <td align="center">{{prod.Precio}}</td>
                <td align="center">{{prod.Cantidad}}</td>
                <td align="center"><input type="checkbox" ng-model="prod"/>Ocultar
                    <!-- La verdad que me imagino que quieres estas acciones aqui -->
                    <button class="btn-warning" ng-click="removeItem($index)">Borrar fila</button>
                    <button class="btn-warning" ng-click="borrar()">Borrar todo</button>
                    <input class="btn-warning" type="submit" value="Mostrar Datos" ng-model="prod"/>
                </td>
            </tr>
            </tbody>
          </table>
        </center>
    </div>
    <div id="Pagina principal" class="tabcontent">
        <center><h2>Biotactex. Productos ecologicos C.A.</h2></center>
    </div>
</div>

And where are you going to occupy your directive, now yes, you put the custom tag:
index.html 

<!DOCTYPE html>
<html ng-app="app">
  <head>
   <script type="text/javascript" src="js/angular.min.js"></script>
   <script type="text/javascript" src="js/app.js"></script>
   <script type="text/javascript" src="js/app2.js"></script>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
   <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css"/>
   <link rel="stylesheet" href="css/todo.css">
   <meta charset="UTF-8">
  <style>
  .efecto
  {
    color:white;
    background:green;
  }
  </style> 
</head>
<body>
  <div class="tab">
    <a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Pagina principal')">Pagina principal</a>
    <a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Agregar productos')">Agregar productos</a>
    <a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Mostrar productos')">Mostrar productos</a>
  </div>
  <product-panels></product-panels>
 </body>
</html>

Likewise, if you like to expose better what you are looking to achieve, I will gladly try to help you. :)
Greetings

    
answered by 23.03.2017 в 04:13
csv data file as array in Python Jquery .val () fails to read line break