각도 방향에서 부울 값을 바인딩하려면 어떻게 해야 합니까?

각도 방향에서 부울 값을 바인딩하려면 어떻게 해야 합니까?

몇 가지 부울 속성을 디렉티브에 바인드/설정하고 싶습니다.하지만 나는 이것을 어떻게 해야 하는지 그리고 다음 행동을 성취할 수 있는지 정말 모르겠다.

구조물에 플래그를 설정한다고 가정해 보겠습니다.리스트를 접을 수 있는지 없는지 확인합니다.다음과 같은 HTML 코드를 가지고 있습니다.

<list items="list.items" name="My list" collapsable="true"></list>

items쌍방향으로 묶여 있습니다.name단순한 속성입니다.

그러면 좋겠어요.collapsable값(true, false 또는 기타)을 전달함으로써 리스트의 $syslog에서 사용할 수 있는 속성(양방향 바인딩)

<list items="list.items" name="{{list.name}}" collapsable="list.collapsed"></list>

UI 컴포넌트를 개발 중인데 여러 가지 방법으로 조작할 수 있도록 하고 싶습니다.오브젝트의 속성을 속성에 전달하여 컴포넌트의 상태를 알고 싶은 사람도 있습니다.

이것을 달성할 수 있는 방법이 있나요?제가 잘못 이해했거나 틀렸다면 정정해 주세요.

감사해요.

다음과 같이 부울에 대해 독자적인 1방향 데이터 바인딩 동작을 설정할 수 있습니다.

link: function(scope, element, attrs) {

    attrs.$observe('collapsable', function() {

        scope.collapsable = scope.$eval(attrs.collabsable);
    });

}

여기서 $observe를 사용한다는 것은 "watch"가 속성 변경에만 영향을 받는다는 것을 의미하며 지시문 내에서 $scope.collapsable을 직접 변경해도 영향을 받지 않습니다.

양방향 바인딩을 설정하는 명령어에 스코프를 만듭니다.

app.controller('ctrl', function($scope)
{
    $scope.list = {
        name: 'Test',
        collapsed: true,
        items: [1, 2, 3]
    };
});

app.directive('list', function()
{
    return {
        restrict: 'E',
        scope: {
            collapsed: '=',
            name: '=',
            items: '='
        },
        template:
            '<div>' +
                '{{name}} collapsed: {{collapsed}}' +
                '<div ng-show="!collapsed">' +
                    '<div ng-repeat="item in items">Item {{item}}</div>' +
                '</div>' +
                '<br><input type="button" ng-click="collapsed = !collapsed" value="Inside Toggle">' +
            '</div>'
    };
});

다음으로 Atribute로서 옵션을 전달합니다.

<list items="list.items" name="list.name" collapsed="list.collapsed"></list>

http://jsfiddle.net/aaGhd/3/

줄을 넘길 수 없습니다.true또는false또한 다음과 같은 스코프 속성 전달을 지원합니다.list.collapsed쌍방향 바인딩의 Atribut값으로 지정합니다.둘 중 하나를 선택해야 합니다.

이는 격리 범위를 사용할 때 지시문에서 속성 값을 해석하는 방법을 하나만 지정할 수 있기 때문입니다.

내 생각엔 네가 이걸 쓸 수 있을 것 같은데=링크 기능을 체크합니다.attrs.collapsable로 설정되어 있다.true또는false: 이 경우 부울 값이 전달된 것을 알고, 전달되지 않은 경우 양방향 데이터 바인딩을 사용합니다.하지만 이건 해킹이야

1년 정도 늦었지만 링크 기능(https://docs.angularjs.org/guide/directive))을 사용하면 가능합니다.시그니처는 다음과 같습니다.

function link(scope, element, attrs) { ... } 

해당 특성 객체는 전달된 원시 값으로 채워집니다.따라서 (attrs.disc == 'true') {...} 또는 그와 비슷한 것.

Angular 1.3 애트리뷰트부터.$defined Atribute에도 트리거되는 것처럼 보이므로 미정의 Atribute를 설명하려면 다음과 같은 작업을 수행해야 합니다.

link: function(scope, element, attrs) {
    attrs.$observe('collapsable', function() {
      scope.collapsable = scope.$eval(attrs.collapsable);
      if (scope.collapsable === undefined) {
        delete scope.collapsable;
      }
    });
  },

언급URL : https://stackoverflow.com/questions/18014471/how-to-bind-boolean-values-in-angular-directives