Définition des variables de portée dynamique dans AngularJs - portée.<some_string>

Question

J'ai une chaîne que j'ai obtenue d'un routeParam ou d'un attribut de directive ou autre chose, et je veux créer une variable sur la portée basée sur cela. Donc :

$scope. = "quelque chose".

Cependant, si la chaîne contient un ou plusieurs points, je veux la diviser et en fait "descendre" dans la portée. Donc 'foo.bar' devrait devenir $scope.foo.bar. Cela signifie que la version simple ne fonctionnera pas !

// Cela ne fonctionnera pas car l'assignation de variables de cette manière ne "descendra" pas
// Elle attribuera à des variables nommées exactement la chaîne complète, points et tout.
var the_string = 'vie.sens';
$scope[the_string] = 42;
console.log($scope.vie.sens);  // <-- Non ! Ceci est indéfini.
console.log($scope['vie.sens']);  // <-- C'est par ici à la place !

Lors de la lecture d'une variable basée sur une chaîne, vous pouvez obtenir ce comportement en faisant $scope.$eval(the_string), mais comment le faire lors de l'attribution d'une valeur ?

Answer 1

Veuillez noter : ceci est simplement une chose JavaScript et n'a rien à voir avec Angular JS. Alors ne vous trompez pas sur le signe '$' magique ;)

Le problème principal est que c'est une structure hiérarchique.

console.log($scope.life.meaning);  // <-- Non ! Ceci est indéfini.
=> a.b.c

Ceci est indéfini parce que "$scope.life" n'existe pas mais le terme ci-dessus veut résoudre "meaning".

Une solution pourrait être

var the_string = 'lifeMeaning';
$scope[the_string] = 42;
console.log($scope.lifeMeaning);
console.log($scope['lifeMeaning']);

ou avec un peu plus d'effort.

var the_string_level_one = 'life';
var the_string_level_two = the_string_level_one + '.meaning';
$scope[the_string_level_two ] = 42;
console.log($scope.life.meaning);
console.log($scope['the_string_level_two ']);

Puisque vous pouvez accéder à un objet structural avec

var a = {};
a.b = "ab";
console.log(a.b === a['b']);

Il existe plusieurs bons tutoriels à ce sujet qui vous guideront bien à travers le plaisir avec JavaScript.

Il y a quelque chose à propos du

$scope.$apply();
faire...quelque chose...bla...bla

Allez chercher sur le web pour 'angular $apply' et vous trouverez des informations sur la fonction $apply. Et vous devriez l'utiliser de manière avisée de cette façon (si vous n'êtes pas déjà dans une phase $apply).

$scope.$apply(function (){
    faire...quelque chose...bla...bla
})

Answer 2

Si vous utilisez la bibliothèque Lodash, voici la manière de définir une variable dynamique dans la portée angulaire.

Pour définir la valeur dans la portée angulaire.

_.set($scope, the_string, 'life.meaning')

Pour obtenir la valeur de la portée angulaire.

_.get($scope, 'life.meaning')

Answer 3

Si vous essayiez de faire ce que j'imagine que vous essayiez de faire, alors vous devez simplement traiter la portée comme un objet JS normal.

Voici ce que j'utilise pour une réponse de succès API pour un tableau de données JSON...

function(data){

    $scope.subjects = [];

    $.each(data, function(i,subject){
        //Store array of data types
        $scope.subjects.push(subject.name);

        //Split data in to arrays
        $scope[subject.name] = subject.data;
    });
}

Maintenant {{subjects}} renverra un tableau de noms de sujets de données, et dans mon exemple il y aurait un attribut de portée pour {{jobs}}, {{customers}}, {{staff}}, etc. de $scope.jobs, $scope.customers, $scope.staff