AngularJs 복잡한 데이터를 지침으로 전달

AngularJs 복잡한 데이터를 지침으로 전달

다음과 같은 지시가 있습니다.

<div teamspeak details="{{data.details}}"></div>

오브젝트 구조는 다음과 같습니다.

data: {
                details: {
                    serverName: { type: 'text', value: 'my server name' },
                    port: { type: 'number', value: 'my port' },
                    nickname: { type: 'text' },
                    password: { type: 'password' },
                    channel: { type: 'text' },
                    channelPassword: { type: 'password' },
                    autoBookmarkAdd: { type: 'checkbox' }
                }
}

데이터 내의 데이터를 기반으로 링크를 생성해 주세요.data.details물건.유감스럽게도 오브젝트의 내부 값에 액세스할 수 없기 때문에 동작하지 않지만, 다음과 같은 단순한 데이터 구조를 전달합니다.

<div teamspeak details="{{data.details.serverName.value}}"></div>

를 사용하여 액세스 할 수 있습니다.{{details}}.

지시 코드는 다음과 같습니다.

App.directive('teamspeak', function () {
    return {
        restrict: 'A',
        template: "<a href='ts3server://{{details.serverName.value}}:{{details.port.value}}'>Teamspeak Server</a>",
        scope: {
            details: '@details',
        },
        link: function (scope, element, attrs) {
        }
    };
});

감사해요.

Angularjs 공식 사이트 설명 읽기:

@ 또는 @attr - 로컬 스코프 속성을 DOM 속성 값에 바인딩합니다.DOM 속성이 문자열이기 때문에 결과는 항상 문자열입니다.속성 이름이 지정되지 않은 경우 속성 이름은 로컬 이름과 동일한 것으로 간주됩니다.범위 정의 {localName:'@myAttr'}을(를) 지정하면 위젯 범위 속성 localName이 보간된 hello {{name}} 값을 반영합니다.이름 속성이 변경되면 위젯 범위의 localName 속성도 변경됩니다.이름은 상위 범위(컴포넌트 범위가 아님)에서 읽힙니다.

따라서 문자열만 전송할 수 있으며 개체를 전달하려면 다음 명령을 사용하여 양방향 바인딩을 설정해야 합니다.=.

   scope: {
        details: '=',
    },

그리고 당신의 HTML은

<div teamspeak details="data.details"></div>

범위를 분리하지 않고 수행하는 방법에 대한 질문이 있었습니다. 해결 방법은 다음과 같습니다.

<div teamspeak details="{{data.details}}"></div>

App.directive('teamspeak', function () {
    return {
        restrict: 'A',
        template: "<a href='ts3server://{{details.serverName.value}}:{{details.port.value}}'>Teamspeak Server</a>",
        link: function (scope, element, attrs) {
            if(attrs.details){
                scope.details = scope.$eval(attrs.details);
            }
        }
    };
});

사용할 수도 있습니다.$interpolate에 가치가 있다면attrs.details각도 {{...}로 동적으로 설정되어야 합니다.}} 표현...

scope.details = scope.$eval($interpolate(attrs.details)(scope));

(주사하는 것을 잊지 마세요.$interpolate(지침에 포함)

중요사항:나는 각도 2에서 이 방법을 테스트하지 않았다.

언급URL : https://stackoverflow.com/questions/18939569/angularjs-passing-complex-data-to-directive