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객체 내부의 데이터를 기반으로 링크를 생성하고 싶습니다 . 불행히도 어떻게 든 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);
            }
        }
    };
});

We can even use $interpolate if any values in attrs.details should be dynamically set with angular {{...}} expressions...

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

(don't forget to inject $interpolate service into your directive)

Important Note: I have not tested this method with angular 2.

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