2

Estoy trabajando con html, php y AngularJS. Mi problema es que estoy mostrando un listado de Subtipos. Los cuales pueden ser solo subtipos o cumplir tambien el rol de organismos. . Tengo la siguiente funcion en mi controlador donde si es solo un subtipo me regresa 0, pero si es tambien un organismo me regresa 1.

 public function checkOrganismo($id){
        $subtipo = $this->show($id);
        $tipos = Organismo::where('estatus',1)->get();
        $flag=0;
        $cont=0;
        //return $tipos;
       for($c=0; $c < count($tipos);$c++){
            if($tipos[$c]->nombre==$subtipo->nombre) $cont++;
        }
        if($cont>0) $flag=1;
        return  $flag;
    }

De esta manera hago la petición con angular para acceder a la función checkOrganismo.

$scope.check = function($id){
    $http.get('/checkOrganismo/'+$id).then(function success(response){ 
        $scope.checar = response.data;
    }); 

    console.log($scope.checar);
};

Y en mi html los muestro de la siguiente manera:

<div class="container hoverStyle" >
<h3>Seleccione:</h3>
  <div class="row" >       
    <div class="col-6 col-sm-3" ng-repeat="subtipo in subtipos | filter: {idorganismo_tipo: <?php echo $_GET['id']?>}"

        <a  ng-if="check(subtipo.idorganismo_subtipo)==1" href="Detalle?id=@{{subtipo.idorganismo_tipo}}" target="_self"">
        <a  ng-if="check(subtipo.idorganismo_subtipo)==0" href="Organimos?id=@{{subtipo.idorganismo_tipo}}" target="_self"">
           <p>@{{val.valor}}</p>
           <img id="imgElement" src="images/poder.png">
           <button type="button" class="btn btn-primary btn-lg btn-category">
           <span class="categoryText">@{{subtipo.nombre}}</span></button>
      </a>
    </div>

Si solo es un subtipo(0) deberia mostrarse el link a una vista que se llama organismos, y si es un subtipo-organismo(1) manda a una vista que se llama Detalle.

Mi problema es que creo que no estoy utilizando bien los ng-if porque me arroja los siguientes errores.

Me gustaria saber cual es la manera de implementarlo correctamente o si existe una manera mas fácil de hacerlo.

4
  • Ya añadí la imagen con los errores.
    – Blidge
    Commented el 28 nov. 2017 a las 21:05
  • $scope.check = function($id){ $http.get('/checkOrganismo/'+$id) .then(function success(response){ $scope.checar = response.data; }); console.log($scope.checar); };
    – Blidge
    Commented el 28 nov. 2017 a las 21:12
  • Ya lo intente pero me sigue enviando el mismo error de Error: [$rootScope:infdig] errors.angularjs.org/1.6.6/$rootScope/…
    – Blidge
    Commented el 28 nov. 2017 a las 21:24
  • Posiblemente lo que tenga que hacer es que la función checkOrganismo envíe el dato no con return sino así: echo $flag
    – Alejandro
    Commented el 23 may. 2018 a las 16:03

1 respuesta 1

0

Estoy algo atrazado con esta pregunta, pero me gustaria contribuir en caso de que alguien mas necesite hacer algo parecido.

Al menos en el codigo que muestra aca puedo observar varios elementos que llamaron mi atencion.

  1. Si usted esta desarrollando una SPA app(Single page application) y necesita pasar un parametro a traves de la url en angularjs es mejor usar el routing que viene con angular.

esto puede hacerlo de esta manera

var ejemploApp = angular.module('ejemploApp',['ngRoute']);

    ejemploApp.config(['$routeProvider',
        function($routeProvider){
            $routeProvider.
            when('/organismos/:idOrganismoTipo',{
                texto:"This is angular",
                templateUrl : 'Organismos.html',
                controller: 'OrganismosController'
            })
        }]);

    ejemploApp.controller('OrganismosController',function($scope,$routeParams,$route) {
        //  Aca garantizo que cada vez que navego a esta pagina tengo el 

        //  id que voy a necesitar para filtrar en ng-repeat.

        $scope.idorganismo_tipo = $routeParams.idOrganismoTipo;
        $scope.texto = $route.current.texto;

    });

lo anterior limpia el codigo que viene a continuacion porque los expertos de angularjs recomiendan no mezclar tecnologias a menos que sea super necesario, y en mi opinion este caso puede mejorarse.

<div class="col-6 col-sm-3" ng-repeat="subtipo in subtipos | filter: {idorganismo_tipo: <?php echo $_GET['id']?>}"

A continuacion voy a comentar que rootScope es uno de los mayores dolores de cabeza de angularJS y cuando usted entiende como funciona el $digest() y $apply() entonces va a comenzar a no mezclar llamadas asincronas ($http.get) con el $scope de angular. Como se resuelve este problema, voila aparecen los Services y Factories (los dos permiten hacer lo mismo aunque hay diferencias notables, esa es otra tarea) aca le voy a agregar la solucion, de nuevo no tengo toda la informacion por eso el codigo es general

// Recomendado como una buena practica
// service
angular
    .module('ejemploApp')
    .factory('organismoService', organismoService);


organismoService.$inject = ['$http']; 

function organismoService($http){
   // Esto garantiza el encapsulamiento y Single Responsability

   var service = {
      check: check,
   }

   return service;

   function check($id) {
       return $http.get('/checkOrganismo/'+$id);
   }

} 

Ahora voy a usar mi servicio

...
ejemploApp.controller('OrganismosController',function($scope,$routeParams,$route, organismoService) {
        //  Aca garantizo que cada vez que navego a esta pagina tengo el 

        //  id que voy a necesitar para filtrar en ng-repeat.

        $scope.idorganismo_tipo = $routeParams.idOrganismoTipo;
        $scope.texto = $route.current.texto;

         $scope.check = function (id) {
            organismoService.check(id)
                            .then(function(response){
                               /* Aca ocurre uno de los errores mas simples y 
                                  yo soy el que mas se equivoca aqui por eso lo comento
                                  Debe verificar que la respuesta del servidor realmente viene como 

                                  response.data, porque puede ser directamente response, 
                                   puede ser cuaquier otra cosa como por ejemplo response.miData...*/

                               $scope.checar = response.data;

                               }).catch(function (err) {
                                    console.log('Error en la llamada al server', err);

                               });

Con esto debe resolver el problema pero adicional a esto tiene un detalle mas que son estos condicionales

 <a  ng-if="check(subtipo.idorganismo_subtipo)==1" href="Detalle?id=@{{subtipo.idorganismo_tipo}}" target="_self"">

El problema es que usted esta haciendo el render basado en una operacion asincrona y esa es otra razon por la que el $rootScope se vuelve loco, los ng-if se recomienda que no dependan de funciones y si de variables. La solucion de este asunto depende mas de la estructura de dato que esta usando, en este caso mi json vendria con toda la data que necesito comparar y asi elimino una llamada extra al API.

Espero sirva de ayuda a otros colegas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.