Come associare valori booleani nelle direttive angolari?

Question

Mi piacerebbe legare/impostare alcuni attributi booleani ad una direttiva. Ma davvero non so come farlo e per ottenere il seguente comportamento.

Immaginate che voglio impostare un flag per una struttura, diciamo che una lista è pieghevole o no. Ho il seguente codice HTML:

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

items sono due vie binded, name è solo un attributo

mi piacerebbe quell'attributo collapsable sia disponibile in $ campo di applicazione della lista o passando un valore (vero, falso o altro), sia un legame

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

sto sviluppando alcuni componenti dell'interfaccia utente e vorrei fornire modo multiplo di interagire con loro a due vie. Forse, nel tempo, alcuni ragazzi vorrebbero conoscere lo stato di tale componente, o è crollato o meno, passando proprietà di un oggetto per l'attributo.

C'è un modo per raggiungere questo obiettivo? Per favore correggimi se ho frainteso qualcosa o mi sbaglio.

Grazie

Answer 1

creare un ambito in merito alla direttiva che stabilisce bidirezionale vincolante:

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

Poi passano le opzioni come attributi:

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

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

Answer 2

Non è possibile passare le stringhe true o false come valore dell'attributo, e supportano anche passando una proprietà ambito come list.collapsed come valore dell'attributo per legame a due vie. Devi scegliere in un modo o nell'altro.

Questo perché è possibile specificare un solo modo di interpretare il valore dell'attributo nella direttiva quando si utilizza un ambito isolato.

Immagino che si potrebbe utilizzare = nella vostra diretive, e anche il check-nella funzione di collegamento se attrs.collapsable è impostato su true o false: se è così, allora si conosce un valore booleano è stata approvata, e se non, utilizzare il due modo vincolante. Ma questo è hacky.

Answer 3

So che sono in ritardo di un anno, ma è possibile farlo utilizzando la funzione di collegamento (https://docs.angularjs.org/guide/directive). La firma è simile al seguente:.

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

Che attrs oggetto verrà compilato con i valori grezzi passati in Quindi si può dire se (attrs.collapsed == 'true') {...} o qualcosa del genere .

Answer 4

È possibile configurare il proprio comportamento l'associazione dati a 1 via per booleani come questo:

link: function(scope, element, attrs) { 

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

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

} 

Utilizzando $ osservare qui significa che il vostro "orologio" è influenzato solo dall'attributo cambiando e non saranno interessati se dovevi cambiare direttamente $ scope.collapsable all'interno della tua direttiva..

Answer 5

Dal momento angolare 1,3 attrs $ osservare sembra innescare anche per gli attributi non definiti, quindi se si vuole per tenere conto di un attributo non definito, è necessario fare qualcosa di simile:

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