source

AngularJs - 스코프에서 동적 스코프 변수 설정

factcode 2023. 3. 20. 23:38
반응형

AngularJs - 스코프에서 동적 스코프 변수 설정

는 가가 a에서 얻은 .routeParam또는 지시 속성 같은 것을 바탕으로 스코프에 변수를 만듭니다.: ★★★★★★★★★★★★★★:

$scope.<the_string> = "something".

그러나 문자열에 도트가 하나 이상 포함되어 있는 경우 분할하여 실제로 스코프로 "드릴다운"하고 싶습니다. ★★★★★★★★★★★★★★★★★.'foo.bar'should $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)을을 할할 는는 는는 떻? ???

제가 찾은 해결책은 $parse를 사용하는 것입니다.

"각도 표현식을 함수로 변환합니다."

더 좋은 답변이 있는 분은 질문에 새로운 답변을 추가해 주세요!

다음은 예를 제시하겠습니다.

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

에릭의 답을 출발점으로 삼아서.나는 나에게 맞는 더 간단한 해결책을 찾았다.

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

$scope를 사용하거나 사용하지 않고 테스트했습니다.$apply. $apply가 없어도 올바르게 작동합니다.

결과에서 동적 각도 변수 생성

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

ps. 컨트롤러의 기능에 $120 속성을 전달하는 것을 잊지 마십시오.

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로, 「」의 이 .$indexindex ):, current loop 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 개체처럼 취급하기만 하면 됩니다.

이것은 JSON 데이터 배열에 대한 API 성공 응답에 사용하는 것입니다.

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}}은 데이터 제목 배열을 반환합니다.이 예에서는 $scope.jobs, $subject.subjects, $subjects}, {{subjects}, {{staff}} 등의 스코프 속성이 있습니다.

언급URL : https://stackoverflow.com/questions/18875486/setting-dynamic-scope-variables-in-angularjs-scope-some-string

반응형