지시어로 부울 값 전달

지시어로 부울 값 전달

지시문에 의해 렌더링된 요소의 가시성을 전환하려고 합니다.<div ngHide="readOnly">. 값 또는readOnly지시문을 통해 전달됩니다.

angular.module('CrossReference')
    .directive('singleViewCard', [function() {
        return {
            restrict:'AE',
            templateUrl: '/CrossReference-portlet/js/templates/SingleViewCard.html',
            replace:true,
            scope: {
                readOnly:'@'

            },
            link: {
                pre:function(scope, tElement, tAttrs) {}, 
                post:function(scope, tElement, tAttrs) {};
                }
            }
        };
    }]);

이것은, 다음의 경우에 기능하는 것 같습니다.

<!-- element rendered in single-view-card is hidden -->
<div single-view-card read-only="{{true}}"/>

<!-- element rendered in single-view-card is shown -->
<div single-view-card read-only="{{false}}"/>

단, 부울식을 반전시킨 경우<div ngHide="!readOnly">지시문을 다음과 같이 사용해도 예상대로 다이브는 숨겨지지 않습니다.

<!-- element is rendered when it should be hidden -->
<div single-view-card read-only="{{false}}"/>

내가 뭘 잘못하고 있지?

당신이 잘못하고 있는 것은

readOnly:'@'

즉, readOnly는 문자열이 되고 js 변수 시행이 됩니다.

readOnly:'='

그리고나서

<div single-view-card read-only="{{false}}"/>

그래야 한다

<div single-view-card read-only="true"/>

당신은 더 많은 코드를 보여줄 필요가 있다, 이것은 오류의 일부일 수 있지만 나는 더 많은 코드가 있다고 생각한다.

현재 bto.rdz가 답변에서 언급했듯이,@는 Atribute의 raw 값을 읽기 때문에 부울 값을 보간해야 합니다.다음 예제에서는 값을 전환할 수 있습니다.readOnly모델을 유지하는 컨트롤러를 통해 지시의 범위 수준에서ctrlReadOnly.

대신 스코프 변수를 사용하여 다이내믹하게 하는 것이 좋습니다.=.

지시문 사용 방법

<div single-view-card read-only="ctrlReadOnly"></div>

---

지시문은 다음과 같습니다.

angular.module('CrossReference', [])
    .directive('singleViewCard', [function () {
    return {
        restrict: 'A',
        template: '<div ng-hide="readOnly">Hidden when readOnly is true</div>',
        replace: true,
        scope: {
            readOnly: '='
        }
    };
}])

여기 보기 데이터를 준비하기 위한 가짜 컨트롤러가 있습니다.

.controller('myCtrl', function ($scope) {
    $scope.ctrlReadOnly = false;
});

---

나는 여기서 바이올린을 켰다.

(post 1.5) 컴포넌트 월드에서는 '<'를 사용하여 부울을 원타임바인딩으로 전달할 수 있습니다.

각도 성분 참조

입력은 < 및 @ 바인딩을 사용해야 합니다.< 기호는 1.5 이후 사용 가능한 단방향 바인딩을 나타냅니다.=와 다른 점은 구성 요소 범위의 바인딩된 속성이 감시되지 않는다는 것입니다. 즉, 구성 요소 범위의 속성에 새 값을 할당하면 상위 범위가 업데이트되지 않습니다.

지시문은 문제 없습니다(다만, 세미콜론은 사용할 수 없습니다).post:function(scope, tElement, tAttrs) {}).

직접 사용:

<div single-view-card read-only="true"></div>

SingleViewCard.html:

<div ng-hide="!{{readOnly}}">Lorem ipsum</div>

느낌표는 물결 괄호 앞에 붙습니다.

설명.

scope: {
    readOnly:'@'
}, 

라는 의미이다readOnly에 의해 지정된 문자열 값을 유지하는 변수가 됩니다.read-only기여하다.그 후, 델의readOnly변수에는 더블컬리 괄호를 붙입니다.

저도 여기서 jsFiddle을 만들었습니다.

언급URL : https://stackoverflow.com/questions/25799363/passing-boolean-value-into-directive