0

Que tal verán soy nuevo en angularjs y tengo un problema al intentar hacer un que un scope sea dinámico, mi código original y que si funciona es el siguiente

var app = angular.module("telApp")
.controller("PromoDevicesController", 
['$window','$scope','$attrs','$http','$cookies', function($window, $scope, $attrs, $http, $cookies) {

if ($attrs.devices != "") {
    var dataAttribute = JSON.parse($attrs.devices);
    if (dataAttribute[0] != null) {
        var jsonData = '/bin/device/filter.filterAllDataDevice.'+dataAttribute[0]+'.json';
        $.getJSON(jsonData, function (jsonData) {
            $scope.device0 = jsonData.data[0];
            $scope.$apply();
        });
    } else {
        var jsonData = '/bin/device/filter.filterAllDataDevice.'+dataAttribute+'.json';
        $.getJSON(jsonData, function (jsonData) {
            $scope.device0 = jsonData.data[0];
            $scope.$apply();
        });
    }
    if (dataAttribute[1] != null) {
        var jsonData = '/bin/device/filter.filterAllDataDevice.'+dataAttribute[1]+'.json';
        $.getJSON(jsonData, function (jsonData) {
            $scope.device1 = jsonData.data[0];
            $scope.$apply();
        });
    }
    if (dataAttribute[2] != null) {
        var jsonData = '/bin/device/filter.filterAllDataDevice.'+dataAttribute[2]+'.json';
        $.getJSON(jsonData, function (jsonData) {
            $scope.device2 = jsonData.data[0];
            $scope.$apply();
        });
    }
    if (dataAttribute[3] != null) {
        var jsonData = '/bin/device/filter.filterAllDataDevice.'+dataAttribute[3]+'.json';
        $.getJSON(jsonData, function (jsonData) {
            $scope.device3 = jsonData.data[0];
            $scope.$apply();
        });
    }
    if (dataAttribute[4] != null) {
        var jsonData = '/bin/device/filter.filterAllDataDevice.'+dataAttribute[4]+'.json';
        $.getJSON(jsonData, function (jsonData) {
            $scope.device4 = jsonData.data[0];
            $scope.$apply();
        });
    }
    if (dataAttribute[5] != null) {
        var jsonData = '/bin/device/filter.filterAllDataDevice.'+dataAttribute[5]+'.json';
        $.getJSON(jsonData, function (jsonData) {
            $scope.device5 = jsonData.data[0];
            $scope.$apply();
        });
    }
    if (dataAttribute[6] != null) {
        var jsonData = '/bin/device/filter.filterAllDataDevice.'+dataAttribute[6]+'.json';
        $.getJSON(jsonData, function (jsonData) {
            $scope.device6 = jsonData.data[0];
            $scope.$apply();
        });
    }
    if (dataAttribute[7] != null) {
        var jsonData = '/bin/device/filter.filterAllDataDevice.'+dataAttribute[7]+'.json';
        $.getJSON(jsonData, function (jsonData) {
            $scope.device7 = jsonData.data[0];
            $scope.$apply();
        });
    }
    if (dataAttribute[8] != null) {
        var jsonData = '/bin/device/filter.filterAllDataDevice.'+dataAttribute[8]+'.json';
        console.log(""+dataAttribute[8]);
        $.getJSON(jsonData, function (jsonData) {
            $scope.device8 = jsonData.data[0];
            $scope.$apply();
        });
    }
    if (dataAttribute[9] != null) {
        var jsonData = '/bin/device/filter.filterAllDataDevice.'+dataAttribute[9]+'.json';
        console.log(""+dataAttribute[9]);
        $.getJSON(jsonData, function (jsonData) {
            $scope.device9 = jsonData.data[0];
            $scope.$apply();
        });
    }
}
}]);

Como verán el código se repite mucho en cada if y el problema es que solo obtiene 10 atributos por lo cual lo quiero hacer dinamico y en vez de pasarlo por condicionales pasarlo por un while de la siguiente forma,

    var app = angular.module("telApp")   
.controller("PromotionDevicesController", ['$window','$scope','$attrs','$http','$cookies', function($window, $scope, $attrs, $http, $cookies) {   

        if ($attrs.devices != "") {   
            var dataAttribute = JSON.parse($attrs.devices);   
            if (dataAttribute[0] != null) {   
                var jsonData = '/bin/device/filter.filterAllDataDevice.'+dataAttribute[0]+'.json';   
                $.getJSON(jsonData, function (jsonData) {   
                    $scope.device0 = jsonData.data[0];   
                    $scope.$apply();   
                });   
            } else {   
                var jsonData = '/bin/device/filter.filterAllDataDevice.'+dataAttribute+'.json';   
                $.getJSON(jsonData, function (jsonData) {   
                    $scope.device0 = jsonData.data[0];   
                    $scope.$apply();   
                });   
            }   
            var index = 1;   
            while(dataAttribute[index] != null){   
                var jsonData = '/bin/device/filter.filterAllDataDevice.'+dataAttribute[index]+'.json';   
                $.getJSON(jsonData, function (jsonData) {   
                    $scope['device' + index] = jsonData.data[0];   
                    $scope.$apply();   
                });   
                index++;   
            }   


        }   
    }]);

sin embargo no funciona me podrían ayudar

Como tal no me arrija ningún error pero a la hora de debugear todo viene como undefined, es decir si hago un

console.log($scope.device1)

Este viene como undefined tambien si coloco breackpoint en var jsonData (cabe aclarar que si esta recibiendo los datos del servicio REST)

Sin embargo funciona bien si coloco un

console.log($scope['device' + index])

Puedo observar que el console.log si me envia los datos correctamente

Ahora el problema es que en el HTML nunca los muestra tratando de acceder a la variable

{{ device1.marca.nombre }}

Aclaro que todo funcionaba cuando estaba dde manera estatica limitado a 10 device

sin embargo ahora que hice que el $scope fuera de manera dinamica dentro de un while esto deja de funcionar

se supone que

    var index = 1;
    $scope['device' + index] = "foo"

es igual a

    $scope.device1 = "foo"

"No se si halla otra forma de obtener variables del tipo $scope['device' + index] desde el html como les dije soy nuevo en angularjs"

3
  • podrías, por favor, especificar el error que arroja Commented el 21 dic. 2017 a las 15:30
  • he complementado la descripcion del problema
    – Polo
    Commented el 21 dic. 2017 a las 17:49
  • Envía la variable index en la función: $.getJSON(jsonData, function (jsonData, index) { $scope['device' + index] = jsonData.data[0]; $scope.$apply(); }); Commented el 21 dic. 2017 a las 19:30

1 respuesta 1

0

Tras intentar varias horas no logre resolverlo de esa manera y es muy raro ya que seguí varias respuestas de stackoverflow ingles y aun así no logre solucionarlo de la manera que especifico así que la opción que tome es dejar el scope statico pero en vez de asignarle las peticiones le asigne un array dinamico

    var index = 1;
    while(dataAttribute[index] != null){
        var jsonData = '/bin/telcelcom/device/filter.filterAllDataDevice.'+dataAttribute[index]+'.json';
        $.getJSON(jsonData, function (jsonData) {
            arrayDevice.push(jsonData.data[0]);
        });
        index++;
    }
    $scope.listdevice = arrayDevice;
    $scope.$apply();
    console.log($scope.listdevice);

y accediendo desde el HTML con

    <p ng-repeat="device in listdevice">{{device.marca.nombre}}</p>

aunque si alguien sabe por que no funciono la forma que planteo en la pregunta se lo agradecería mucho

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.