การตั้งค่าตัวแปรขอบเขตไดนามิกใน AngularJs - ขอบเขต <some_string>

ฉันมีสตริงที่ได้รับจาก a routeParamหรือคุณลักษณะคำสั่งหรืออะไรก็ตามและฉันต้องการสร้างตัวแปรตามขอบเขตตามนี้ ดังนั้น:

$scope.<the_string> = "something".

อย่างไรก็ตามหากสตริงมีจุดอย่างน้อยหนึ่งจุดฉันต้องการแยกและ "เจาะลึก" ลงในขอบเขต ดังนั้นควรจะเป็น'foo.bar' $scope.foo.barซึ่งหมายความว่าเวอร์ชันธรรมดาจะไม่ทำงาน!

// This will not work as assigning variables like this will not "drill down"
// It will assign to a variables named the exact string, dots and all.
var the_string = 'life.meaning';
$scope[the_string] = 42;
console.log($scope.life.meaning);  // <-- Nope! This is undefined.
console.log($scope['life.meaning']);  // <-- It is in here instead!

เมื่ออ่านตัวแปรตามสตริงคุณจะได้รับพฤติกรรมนี้โดยการทำ$scope.$eval(the_string)แต่จะทำอย่างไรเมื่อกำหนดค่า?

วิธีการแก้ปัญหาที่ผมพบคือการใช้$ แจง

"แปลงนิพจน์เชิงมุมเป็นฟังก์ชัน"

หากใครมีคำตอบที่ดีกว่าโปรดเพิ่มคำตอบใหม่สำหรับคำถาม!

นี่คือตัวอย่าง:

var the_string = 'life.meaning';

// Get the model
var model = $parse(the_string);

// Assigns a value to it
model.assign($scope, 42);

// Apply it to the scope
// $scope.$apply(); <- According to comments, this is no longer needed

console.log($scope.life.meaning);  // logs 42

ใช้คำตอบของ Erik เป็นจุดเริ่มต้น ฉันพบวิธีแก้ปัญหาที่ง่ายกว่าซึ่งเหมาะกับฉัน

ในฟังก์ชัน ng-click ของฉันฉันมี:

var the_string = 'lifeMeaning';
if ($scope[the_string] === undefined) {
   //Valid in my application for first usage
   $scope[the_string] = true;
} else {
   $scope[the_string] = !$scope[the_string];
}
//$scope.$apply

ฉันได้ทดสอบโดยมีและไม่มีขอบเขต $ ใช้ $ ทำงานได้อย่างถูกต้องหากไม่มี!

สร้างตัวแปรเชิงมุมแบบไดนามิกจากผลลัพธ์

angular.forEach(results, function (value, key) {          
  if (key != null) {                       
    $parse(key).assign($scope, value);                                
  }          
});

ปล. อย่าลืมส่งแอตทริบิวต์ $ parse ไปยังฟังก์ชันของคอนโทรลเลอร์ของคุณ

หากคุณพอใจกับการใช้ Lodash คุณสามารถทำสิ่งที่ต้องการในบรรทัดเดียวโดยใช้ _.set ():

_.set (วัตถุเส้นทางค่า) ตั้งค่าคุณสมบัติของเส้นทางบนวัตถุ หากไม่มีบางส่วนของเส้นทางจะถูกสร้างขึ้น

https://lodash.com/docs#set

ดังนั้นตัวอย่างของคุณก็จะเป็น: _.set($scope, the_string, something);

เพียงเพื่อเพิ่มคำตอบที่ได้รับการอ่านต่อไปนี้ใช้ได้ผลสำหรับฉัน:

HTML:

<div id="div{{$index+1}}" data-ng-show="val{{$index}}">

$indexดัชนีลูปอยู่ที่ไหน

Javascript ( valueพารามิเตอร์ที่ส่งผ่านไปยังฟังก์ชันอยู่ที่ไหนและจะเป็นค่าของ$indexดัชนีลูปปัจจุบัน):

var variable = "val"+value;
if ($scope[variable] === undefined)
{
    $scope[variable] = true;
}else {
    $scope[variable] = !$scope[variable];
}

โปรดทราบว่านี่เป็นเพียง JavaScript และไม่มีส่วนเกี่ยวข้องกับ Angular JS อย่าสับสนกับสัญลักษณ์ '$' ที่มีมนต์ขลัง;)

ปัญหาหลักคือนี่เป็นโครงสร้างแบบลำดับชั้น

console.log($scope.life.meaning);  // <-- Nope! This is undefined.
=> a.b.c

ไม่ได้กำหนดไว้เนื่องจากไม่มี "$ scope.life" แต่คำข้างต้นต้องการแก้ "ความหมาย"

วิธีแก้ปัญหาควรเป็น

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

หรือมีประสิทธิภาพมากขึ้นเล็กน้อย

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 ']);

เนื่องจากคุณสามารถเข้าถึงวัตถุโครงสร้างด้วย

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

มีบทช่วยสอนที่ดีมากมายเกี่ยวกับเรื่องนี้ซึ่งจะแนะนำคุณได้ดีตลอดการใช้งาน JavaScript

มีบางอย่างเกี่ยวกับไฟล์

$scope.$apply();
do...somthing...bla...bla

ไปและค้นหาในเว็บสำหรับ 'angular $ apply' และคุณจะพบข้อมูลเกี่ยวกับฟังก์ชัน $ apply และคุณควรใช้วิธีนี้อย่างชาญฉลาดมากขึ้น (หากคุณไม่ได้ใช้เฟส $ สมัคร)

$scope.$apply(function (){
    do...somthing...bla...bla
})

หากคุณใช้ไลบรารี Lodash ด้านล่างนี้เป็นวิธีตั้งค่าตัวแปรไดนามิกในขอบเขตเชิงมุม

เพื่อตั้งค่าในขอบเขตเชิงมุม

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

เพื่อรับค่าจากขอบเขตเชิงมุม

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

หากคุณกำลังพยายามทำในสิ่งที่ฉันคิดว่าคุณกำลังพยายามทำอยู่คุณจะต้องปฏิบัติต่อขอบเขตเหมือนออบเจ็กต์ JS ทั่วไปเท่านั้น

นี่คือสิ่งที่ฉันใช้สำหรับการตอบสนองความสำเร็จของ API สำหรับอาร์เรย์ข้อมูล 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;
    });
}

ตอนนี้ {{subject}} จะส่งคืนอาร์เรย์ของชื่อหัวเรื่องข้อมูลและในตัวอย่างของฉันจะมีแอตทริบิวต์ขอบเขตสำหรับ {{job}}, {{customers}}, {{staff}} และอื่น ๆ จาก $ scope งาน, $ scope.customers, $ scope.staff