Angular의 지시 변수에 배열 바인딩JS

Angular의 지시 변수에 배열 바인딩JS

개별 값을 사용할 수 있도록 어레이를 템플릿으로 만들려고 합니다.문제는 템플릿 내에서 속성이 문자열로 바뀌기 때문에 {{var[0]}}로서 더 이상 액세스할 수 없고 대신 문자열의 첫 번째 문자(일반적으로 " ")가 반환된다는 것입니다.

데이터의 간단한 셋업은 다음과 같습니다.

"varForward": ["100", "1"],
"varBack": ["1", "100"]

다음은 해당 데이터와 상호 작용하는 HTML 파일의 단순화된 부분입니다.

<my-customer-vars value="{{varForward}}">
    </address-numbers>
<my-customer-vars value="{{varBack}}">
    </address-numbers>

그리고 마지막으로 커스텀 태그를 제 물건으로 대체해야 할 부분이 있습니다.

directive('myCustomerVars', function($compile) {
    return {
        restrict: 'E',
        scope: {
            value: "@"
        },
        template:
        '<div>'+
          '<p class="body-text">Some stuff goes here</p>'+
          '<input type="text" name="firstinput" value="{{value[0]}}"> - '+
          '<input type="text" name="secondinput" value="{{value[1]}}">'+
        '</div>',
        replace: true
    }
});

즉, 값[0]을 사용하려고 하면 [값[1]을 얻으려고 하면 "이렇게 됩니다.명령어 템플릿 내에서 어레이를 사용할 때 도움이 됩니까?

"@"를 "="로 변경하고 {{ }}을(를) 제외한 어레이로 전달해야 합니다.

다음과 같습니다.

<my-customer-vars value="varForward">
    </my-customer-vars>
<my-customer-vars value="varBack">
    </my-customer-vars>

지시:

directive('myCustomerVars', function($compile) {
    return {
        restrict: 'E',
        scope: {
            value: "="
        },
        template:
        '<div>'+
          '<p class="body-text">Some stuff goes here</p>'+
          '<input type="text" name="firstinput" value="{{value[0]}}"> - '+
          '<input type="text" name="secondinput" value="{{value[1]}}">'+
        '</div>',
        replace: true
    }
});

이는 @에 의해 정의된 directube 속성 내의 모든 표현은 문자열로만 평가되고 다른 방법으로는 바인딩 표현으로 평가되기 때문입니다.(양방향 바인딩이므로 주의한다).

커스텀 검증 디렉티브의 작성 등, 디렉티브에 격리 범위를 작성하지 않는 경우는, 다음과 같이 어레이를 건네줄 수 있습니다.

<my-customer-vars model="varForward">

그런 다음 지시문의 연결 함수의 값을 다음과 같이 읽습니다.

directive('myCustomerVars', function($compile) {
    return {
        restrict: 'E',
        link: function (scope, elm, attrs, ctrl) {
            var myVars = scope[attrs.model]; // <--- took a time to figure out
            console.log(myVars);
        }
    }
});

다니타의 답변에 덧붙이자면, 당신은 다음을 이용해야 할 것이다.$eval다음 스코프 변수를 가져옵니다.

그냥 바꿔요

var myVars = scope[attrs.model]; 

로.

var myVars = scope.$eval(attrs.model); 

또 하나의 관점 - 각도 어플리케이션에서 문자열 배열을 관리하는 것이 문제라면 다음 중 하나(또는 이와 유사한 것)를 사용합니다.

1. ngTags 입력
2. angular select2(태그 모드 포함)
3. ng리스트

독자적인 각도 지시어를 작성하는 연습을 하고 있지 않는 한(그렇다면 내 대답은 무시해 주세요)

언급URL : https://stackoverflow.com/questions/14695792/binding-array-to-directive-variable-in-angularjs