angularjs - personalizadas - ¿Cómo enlazar valores booleanos en directivas angulares?

ng switch angular 6

Question

Me gustaría vincular / establecer algunos atributos booleanos a una directiva. Pero realmente no sé cómo hacer esto y lograr el siguiente comportamiento.

Imagina que quiero establecer una bandera en una estructura, digamos que una lista es plegable o no. Tengo el siguiente código HTML:

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

items están enlazados en dos direcciones, el name es solo un atributo

Me gustaría que ese atributo collapsable esté disponible en el ámbito $ de la lista, ya sea pasando un valor (verdadero, falso o lo que sea), ya sea un enlace de dos vías

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

Estoy desarrollando algunos componentes de la interfaz de usuario y me gustaría proporcionar una forma múltiple de interactuar con ellos. Tal vez, con el tiempo, a algunos chicos les gustaría saber el estado de ese componente, ya sea colapsado o no, al pasar la propiedad de un objeto al atributo.

¿Hay una manera de lograr esto? Por favor, corríjame si entendí algo o me equivoco.

Gracias

Answer 1

Cree un ámbito en la directiva que establece la vinculación bidireccional:

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>''
    };
});

Luego pasa las opciones como atributos:

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

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

Answer 2

Dado que Angular 1.3 attrs. $ Observe parece desencadenar también atributos no definidos, por lo que si desea tener en cuenta un atributo no definido, debe hacer algo como:

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

Answer 3

No puede pasar cadenas true o false como el valor de atributo, y también admite pasar una propiedad de ámbito como list.collapsed como el valor de atributo para enlace de dos vías. Tienes que elegir de una forma u otra.

Esto se debe a que solo puede especificar una forma de interpretar el valor del atributo en su directiva cuando utiliza un ámbito de aislamiento.

Supongo que podría usar = en su directorio, y también verificar su función de enlace si attrs.collapsable se establece en true o false : si es así, entonces sabe que se pasó un valor booleano, y si no, use los datos de dos vías Unión. Pero esto es hacky.

Answer 4

Puede configurar su propio comportamiento de enlace de datos de 1 vía para booleanos como este:

link: function(scope, element, attrs) {

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

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

}

El uso de $ observe aquí significa que su "observación" solo se ve afectada por el cambio de atributo y no se verá afectado si cambia directamente el $ scope.collapsable dentro de su directiva.

Answer 5

Sé que tengo un año de retraso en esto, pero en realidad puedes hacerlo usando la función de enlace ( https://docs.angularjs.org/guide/directive ). La firma se ve así:

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

Ese objeto attrs se completará con los valores sin procesar que se pasaron. Así que podría decir si (attrs.collapsed == ''true'') {...} o algo así.